<!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. java遍历当前会话所有Session

    //方法一:通过遍历的方法进行遍历 String FileName=""; HttpSession session=request.getSession();//获取session ...

  2. LINUX SSH修改默认22/添加端口

    通常ssh远程登录的默认端口是22,但是因为端口22属于高危端口,因此很多时候作为服务器会被关掉,不过这个端口一般是可以更改或者添加的,这样除了22端口,也可以通过别的端口进行访问. 1.首先修改配置 ...

  3. @params、@PathVariabl和@RequestParam用法与区别

    [1]params params: 指定request中必须包含某些参数值是,才让该方法处理. @RequestMapping(value = "testParamsAndHeaders&q ...

  4. .net项目错误:找不到方法:“System.Net.Http.HttpClient stellar_dotnet_sdk.Server.get_HttpClient()

    1.由于在项目里面引用了一个 新的项目stellar_dotnet_sdk,在  return new StellarWallet(ConvertToWalletSetting(coin));   的 ...

  5. 使用clear来清除localStorage保存对象的全部数据

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

  6. C++中强制类型转换

    C++强制类型转换 C++中的强制类型转换虽然兼容C语言中的强制类型转换.但是并不建议在C++中使用C语言风格的强制类型转换.C++中的强制类型转换共有4个关键字分别是:static_cast,con ...

  7. PAT 1016 部分A+B（15）（C++&JAVA&&Python）

    1016 部分A+B(15 分) 正整数 A 的"D​A​​(为 1 位整数)部分"定义为由 A 中所有 D​A​​ 组成的新整数 P​A​​.例如:给定 A=3862767,D​ ...

  8. Hadoop（二） HADOOP集群搭建

    一.HADOOP集群搭建 1.集群简介 HADOOP集群具体来说包含两个集群:HDFS集群和YARN集群,两者逻辑上分离,但物理上常在一起 HDFS集群: 负责海量数据的存储,集群中的角色主要有 Na ...

  9. 语法分析器初步学习——LISP语法分析

    语法分析器初步学习——LISP语法分析 本文参考自vczh的<如何手写语法分析器>. LISP的表达式是按照前缀的形式写的,比如(1+2)*(3+4)在LISP中会写成(*(+ 1 2)( ...

  10. Lazarus下面的javascript绑定另外一个版本bug修正

    Lazarus下面的javascript绑定另外一个版本bug修正 从svn 检出的代码有几个问题 1.fpcjs.pas 单元开始有 {$IFDEF FPC} {$MODE delphi} {$EN ...