图片懒加载

拼搏现实的明天。 2022-02-22 06:09 634阅读 0赞

### 文章目录 ###

*  可能用到的
 *   *   *  属性
         *  占位图
 *  原生 JS 实现
 *   *   *  HTML
         *  JS
 *  其他实现
 *   *  jquery\_lazyload
     *   *  使用
         *  参数
     *  ECHO.js
     *   *  CSS
         *  HTML
         *  JS
         *  常用参数
         *  兼容性
         *  github
         *  快速 demo

# 可能用到的 #

### 属性 ###

页可见区域宽： document.body.clientWidth;
    网页可见区域高： document.body.clientHeight;
    网页可见区域宽： document.body.offsetWidth (包括边线的宽);
    网页可见区域高： document.body.offsetHeight (包括边线的宽);
    网页正文全文宽： document.body.scrollWidth;
    网页正文全文高： document.body.scrollHeight;
    网页被卷去的高： document.body.scrollTop;
    网页被卷去的左： document.body.scrollLeft;
    网页正文部分上： window.screenTop;
    网页正文部分左： window.screenLeft;
    屏幕分辨率的高： window.screen.height;
    屏幕分辨率的宽： window.screen.width;
    屏幕可用工作区高度： window.screen.availHeight;

### 占位图 ###

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">
    
    
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==">
    
    
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

--------------------

# 原生 JS 实现 #

### HTML ###

### JS ###

--------------------

# 其他实现 #

## jquery\_lazyload ##

### 使用 ###

注意：必须设置图片的高度或者宽度，否则插件可能无法正常工作

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">
    
    
    <script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script>
    <script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
    
    <script> $(function(){ $("img.lazy").lazyload(); }) </script>

### 参数 ###

$("img.lazy").lazyload({
      placeholder : "img/grey.gif", //用图片提前占位
        // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
      effect: "fadeIn", // 载入使用何种效果
        // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
      threshold: 200, // 提前开始加载
        // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
      event: 'click',  // 事件触发时才加载
        // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
      container: $("#container"),  // 对某容器中的图片实现效果
        // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
      failurelimit : 10 // 图片排序混乱时
         // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
    });

--------------------

## ECHO.js ##

不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且非常小巧，压缩后不足 1KB。

### CSS ###

.lazy{ width:100%;height:100%;background: url({sh::PUB}img/common/loading.gif) 50% no-repeat;}

### HTML ###

### JS ###

**echo.js**

/*! echo-js v1.7.3 | (c) 2016 @toddmotto | https://github.com/toddmotto/echo */
    !function(t,e){ "function"==typeof define&&define.amd?define(function(){ return e(t)}):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){ "use strict";var e,n,o,r,c,a={ },u=function(){ },d=function(t){ return null===t.offsetParent},l=function(t,e){ if(d(t))return!1;var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},i=function(){ (r||!n)&&(clearTimeout(n),n=setTimeout(function(){ a.render(),n=null},o))};return a.init=function(n){ n=n||{ };var d=n.offset||0,l=n.offsetVertical||d,f=n.offsetHorizontal||d,s=function(t,e){ return parseInt(t||e,10)};e={ t:s(n.offsetTop,l),b:s(n.offsetBottom,l),l:s(n.offsetLeft,f),r:s(n.offsetRight,f)},o=s(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,u=n.callback||u,a.render(),document.addEventListener?(t.addEventListener("scroll",i,!1),t.addEventListener("load",i,!1)):(t.attachEvent("onscroll",i),t.attachEvent("onload",i))},a.render=function(n){ for(var o,r,d=(n||document).querySelectorAll("[data-echo], [data-echo-background]"),i=d.length,f={ l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},s=0;i>s;s++)r=d[s],l(r,f)?(c&&r.setAttribute("data-echo-placeholder",r.src),null!==r.getAttribute("data-echo-background")?r.style.backgroundImage="url("+r.getAttribute("data-echo-background")+")":r.src!==(o=r.getAttribute("data-echo"))&&(r.src=o),c||(r.removeAttribute("data-echo"),r.removeAttribute("data-echo-background")),u(r,"load")):c&&(o=r.getAttribute("data-echo-placeholder"))&&(null!==r.getAttribute("data-echo-background")?r.style.backgroundImage="url("+o+")":r.src=o,r.removeAttribute("data-echo-placeholder"),u(r,"unload"));i||a.detach()},a.detach=function(){ document.removeEventListener?t.removeEventListener("scroll",i):t.detachEvent("onscroll",i),clearTimeout(n)},a});

### 常用参数 ###

echo.init({  
    offset: 100,  
    throttle: 250,  
    unload: false,  
    callback: function (element, op) {  
    	console.log('loaded ok.');  
    }  
    });

说明

参数						描述																		默认值
    offset				离可视区域多少像素的图片可以被加载														0
    throttle			图片延迟多少毫秒加载																	250
    debounce			防抖动																				true
    unload				告诉echo是加载还是卸载视图中的图片，当图片离开视图区域时触发								false
    callback			回调函数，可用来检测图片是否加载														function()

### 兼容性 ###

Echo.js 使用了 HTML5 的 date 属性，并且需要获取该属性的值，所以它并不兼容 IE6、IE7。  
虽然 Lazy Load 也使用了 HTML5 的 date 属性，但它获取值的方法不一样。

### github ###

[https://github.com/echojs/echojs][https_github.com_echojs_echojs]

### 快速 demo ###

图片引用了 github 头像

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>echo.js Demo</title>
    </head>
    <body class="hold-transition skin-blue sidebar-mini">
    <div style="width:10px; height:1500px;"></div>
    <img src="" alt="" width="640" height="480" data-echo="https://avatars3.githubusercontent.com/u/36679118?s=200&v=4">
    <script> !function(t,e){ "function"==typeof define&&define.amd?define(function(){ return e(t)}):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){ "use strict";var e,n,o,r,c,a={ },u=function(){ },d=function(t){ return null===t.offsetParent},l=function(t,e){ if(d(t))return!1;var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},i=function(){ (r||!n)&&(clearTimeout(n),n=setTimeout(function(){ a.render(),n=null},o))};return a.init=function(n){ n=n||{ };var d=n.offset||0,l=n.offsetVertical||d,f=n.offsetHorizontal||d,s=function(t,e){ return parseInt(t||e,10)};e={ t:s(n.offsetTop,l),b:s(n.offsetBottom,l),l:s(n.offsetLeft,f),r:s(n.offsetRight,f)},o=s(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,u=n.callback||u,a.render(),document.addEventListener?(t.addEventListener("scroll",i,!1),t.addEventListener("load",i,!1)):(t.attachEvent("onscroll",i),t.attachEvent("onload",i))},a.render=function(n){ for(var o,r,d=(n||document).querySelectorAll("[data-echo], [data-echo-background]"),i=d.length,f={ l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},s=0;i>s;s++)r=d[s],l(r,f)?(c&&r.setAttribute("data-echo-placeholder",r.src),null!==r.getAttribute("data-echo-background")?r.style.backgroundImage="url("+r.getAttribute("data-echo-background")+")":r.src!==(o=r.getAttribute("data-echo"))&&(r.src=o),c||(r.removeAttribute("data-echo"),r.removeAttribute("data-echo-background")),u(r,"load")):c&&(o=r.getAttribute("data-echo-placeholder"))&&(null!==r.getAttribute("data-echo-background")?r.style.backgroundImage="url("+o+")":r.src=o,r.removeAttribute("data-echo-placeholder"),u(r,"unload"));i||a.detach()},a.detach=function(){ document.removeEventListener?t.removeEventListener("scroll",i):t.detachEvent("onscroll",i),clearTimeout(n)},a}); echo.init({ offset: 0, throttle: 0 }); </script>
    </body>
    </html>

[https_github.com_echojs_echojs]: https://github.com/echojs/echojs