JS实现图片懒加载

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。

思路

用data-xxx属性替换img标签的src属性，当页面滚动到图片区域时候再将src属性替换成data-xxx属性

各种宽高

页可见区域宽： 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;

实现

echo.js，不依赖外部插件，压缩后1kb

<div class="demo">

<!--src属性为空白图片，data-echo中为图片真实路径-->

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

<img class="lazy" src="./img/blank.gif" data-echo="./img/bg.jpg">

</div>

<style>

/*固定宽高*/　　

.demo img { 　　　　

    width: 1024; 

    height: 260px; 

   background: url(images/loading.gif) 50% no-repeat;

}

</style>

<script type="text/javascript" src="./echo.min.js"></script>

<script>Echo.init({

    offset: 0,//离可视区域多少像素的图片可以被加载

    throttle: 100 //图片延时多少毫秒加载

});

</script>

注意事项

如果在AJAX中获取图片数据后使用懒加载，需要在AJAX请求成功后执行初始化，因为初始化是在有数据之后进行的

$.ajax({

    type: 'GET',

    url: 'resources/js/frontmb/json/more.json',

    dataType: 'json',

    success: function(data){

    result = '<a class="item opacity" href="'+data.lists[i].link+'">'

      +'<img src="'+basePath+'resources/image/common/blank.gif" data-echo="'+data.lists[i].pic+'" alt="">'

      +'<h3>'+data.lists[i].title+'</h3>'

      +'<span class="date">'+data.lists[i].date+'</span>'

       +'</a>';

      $('.list').append(result);

      //等AJAX数据加载完成后再初始化

      Echo.init({

          offset: 0,//离可视区域多少像素的图片可以被加载

          throttle: 0 //图片延时多少毫秒加载

        });

   },

  error: function(xhr, type){

      alert('Ajax error!');

     }

 });