在一个项目中,如果同时加载的图片太多的话,会导致页面卡顿,这个时候就会用到懒加载。懒加载的实现原理是监听浏览器的滚动条事件,先加载出前面几张图片,然后当滚动条滚动的时候再依次加载剩余的图片。(先在图片那里设置属性data-img="";然后调用方法,在适当的时候把src设置为data-img的值)
----------------------JS如下(HTML省略)
//懒加载图片 var lazyLoad = (function(){ var clock; function init(){ $(".datagrid-view2 .datagrid-body").on("scroll", function(){//对当前的滚动条对象进行监听,如果是整个浏览器滚动条,则是$(window) if (clock) { clearTimeout(clock); } clock = setTimeout(function(){ checkShow(); }, 200); }); checkShow(); } function checkShow(){ $("img.lazy").each(function(){ var $cur =$(this); if($cur.attr('isLoaded')){ return; } if(shouldShow($cur)){ showImg($cur); } }); $(".centerImgProgress").css("display","none"); } function shouldShow($node){ var top = $node.offset().top;//每张图片距离页面顶部的高度 if(top < 1200){ return true; }else{ return false; } } function showImg($node){ $node.attr('src', $node.attr('data-img')); $node.attr('isLoaded', true); } return { init: init } })()
然后需要在页面初始化加载完成后加上:lazyLoad.init();就可以了。