<!DOCTYPE html>

<html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>图片懒加载(可视区域加载)</title>

 <style>

  * {

  padding: 0px;

  margin: 0px;

  }

  html,

  body {

  width: 100%;

  min-height: 100%;

  }

  #SB {

  margin: 0;

  padding: 0;

  list-style: none;

  }

  #SB .in {

  border: 1px solid red;

  margin: 10px;

  text-align: center;

  height: 400px;

  width: 400px;

  float: left;

  }

  .in img {

  border: none;

  vertical-align: middle;

  height: 400px;

  width: 400px;

  }

 </style>

 </head>

 <body>

 <ul id="ljz">

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

 </ul>

 <script type="text/javascript">

  var aImages = document.getElementById("ljz").getElementsByTagName('img'); //获取id为ljz的文档内所有的图片

  loadImg(aImages);

  window.onscroll = function() { //滚动条滚动触发

  loadImg(aImages);

  };

  //getBoundingClientRect 是图片懒加载的核心

  function loadImg(arr) {

  for(var i = 0, len = arr.length; i < len; i++) {

   if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {

   arr[i].isLoad = true; //图片显示标志位

   //arr[i].style.cssText = "opacity: 0;";

   (function(i) {

    setTimeout(function() {

    if(arr[i].dataset) { //兼容不支持data的浏览器

     aftLoadImg(arr[i], arr[i].dataset.imgurl);

    } else {

     aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));

    }

    arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein

    }, 200)

   })(i);

   }

  }

  }

  function aftLoadImg(obj, url) {

  var oImg = new Image();

  oImg.onload = function() {

   obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象

  }

  oImg.src = url; //oImg对象先下载该图像

  }

 </script>

 </body>

</html>

懒加载js写法二：

    <script type="text/javascript">

	//js懒加载

        var aImg = document.getElementById('ljz').querySelectorAll('img');

        var len = aImg.length; //获取图片数量

        var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历

		window.onload = function(){

           window.scrollTo(0,1);

        }

		window.onscroll = function() {  //滚动执行

            var seeHeight = document.documentElement.clientHeight;  //获取可见区域高度

            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;  //获取body内滚动条位置

            for (var i = n; i < len; i++) {

                if (aImg[i].offsetTop <= seeHeight + scrollTop) {

                    if (aImg[i].getAttribute('src') == '') {

                        aImg[i].src = aImg[i].getAttribute('data-imgurl');

						if(aImg[i].getAttribute('src') == ''){

							aImg[i].src = 'image/zwtp.png';

						}

                    }

                    n = i + 1;

                    console.log('n = ' + n);

                }

            }

        };

    </script>

　　

js, javascript 图片懒加载 实例代码的更多相关文章

  1. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  2. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  3. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  4. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  5. 原生js实现图片懒加载+加入节流

    这两天在学习图片的懒加载实现,看了很多大佬的博客,终于有了点成果.现在用了其中一位大佬的文章中的代码实现了图片懒加载并且在其基础上加入了节流函数. 原理就不多讲了,有需要的可以去大佬的文章看看.大佬文 ...

  6. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  7. js实现图片懒加载

    大型购物网站都会采用图片懒加载技术来优化网站首页打开速度,以提高用户体验,那么具体是怎么实现的呢,我们一探究竟. html结构(div包裹一层用来显示背景图片,等待图片加载完成后,显示真实图片) &l ...

  8. Js 之图片懒加载插件

    一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...

  9. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

随机推荐

  1. ARM板移植udev-126

    下载udev-126.tar.xz 下载的网址为: https://mirrors.edge.kernel.org/pub/linux/utils/kernel/hotplug/ 解压文件并且编译 # ...

  2. java_13.2 Object

    1.类 Object 是类层次结构的根类.每个类都使用 Object 作为超类.所有对象(包括数组)都实现这个类的方法 2.hashCode()方法 返回该对象的哈希值.一般情况下,该方法会根据对象的 ...

  3. Spring事务<tx:annotation-driven/>的理解

    在使用Spring的时候,配置文件中我们经常看到 annotation-driven 这样的注解,其含义就是支持注解,一般根据前缀 tx.mvc 等也能很直白的理解出来分别的作用. <tx:an ...

  4. Requested a new session but one was in progress

    作为appium初学者,估计很多人都会遇到这个错误.如何解决: 1.环境变量中去掉appium的安装路径,添加Appium\node_modules\.bin这个路径进去. 2.启动cmd 输入app ...

  5. TF30063：没有访问xxx的权限 vs2017

    凭据什么的都删掉了,还是无法连接上,最后同事用一种方法o(╥﹏╥)o,先登录vs2015的tfs账号,然后再vs2017上面登录tfs账号即可解决.PS:网上很多文章都是抄的,这个Bug真TM恶心.

  6. Vue 进度条 和 图片的动态更改

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 自适应手机网站meta name代码

    <meta name="viewport" content="width=device-width,initial-scale=1.0">   co ...

  8. spring boot 整合 RabbitMq （注解）

    1.增加rabbitmq的依赖包 <!-- ampq 依赖包 --> <dependency> <groupId>org.springframework.boot& ...

  9. [转载]RPM中SPEC常用路径以及宏变量

    转自:http://blog.csdn.net/txgc1009/article/details/6833764 通过命令rpm --showrc查看实现代码.另外直接通过 rpm --eval &q ...

  10. [转载]linux awk命令详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...