技术文章

jquery图片懒加载实现及其原理

日期:2019-12-10 阅读:195

懒加载或者按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。
 
我们之前看到的懒加载一般是这样的形式:
 
. 浏览一个网页,准备往下拖动滚动条
. 拖动一个占位图片到视窗
. 占位图片被瞬间替换成最终的图片
我们可以在示例中看到懒加载是如何使用的,网页首先用一张轻量级的图片占位,当占位图片被拖动到视窗,瞬间加载目标图片,然后替换占位图片。
 
 
操作代码如下:
 
    <img  class="langlazygif" src="lib/css/loading.gif" data-srcgif="real.jpg"  alt="" />
 
 
 <script>
 
 //滚动事件
          
        $(window).on('scroll',function(){
start ();
 
 
        })
 
        //加载函数 
        function start (){
 
//if($(window).scrollTop()>150)  start (); 
// alert(0);
var topv = $('.langlazygif').offset().top;
      console.log("top:"+topv);
// console.log($(window).height() + $(window).scrollTop());
 
 
            $('.langlazygif').not('[data-isLoaded]').each(function(){
                var $node = $(this);
var hg1 = $node.offset().top;
var hg2 = $(window).height() + $(window).scrollTop();
 
//$('.temp11').html("hg1:"+hg1+"===hg2:"+hg2);
 
//console.log("hg1:"+hg1);
//console.log("hg2:"+hg2);
if(hg2>hg1)  {
                   //缓冲效果 
                    setTimeout(function(){
                    loadIng( $node)
                    },500)
                
               }
            })
        }
        
 
        // 显示状态
        function loadIng($img){ //alert('ok');           
            $img.attr('src', $img.attr('data-srcgif'))             
            $img.attr('data-isLoaded', 1)
        }
 
</script>
---------------
参考:
https://www.jianshu.com/p/68a6683b6a6a