图片延迟加载（用jq自己写的方法）

Posted 2020-08-19 dongxiaolei

$(function() {
            $("img.lazy").attr("src","2.jpg");
            show();
            $(window).scroll(function () {
                show();
            });
            function show(){
                $("img.lazy").each(function () {
                    var clientH = window.screen.availHeight;
                    var $height = $(this).height();
                    var $scroll = $(window).scrollTop();
                    var $off = $(this).offset().top;
                    var $val=$(this).attr("data-original");
                    if ($off - $scroll < clientH) {
                        $(this).attr("src",$val);
                    }
                })
            }
            })

注:我写的这个方法，实现的效果是当图片的上边框显示在可视区域内时，把图片的真实路径赋值给src。

　　如果需要让图片全部显示在可视区域时再换成真实src的话，需要把if判断中的条件换成   $off + $height - $scroll < clientH

首先给需要延迟加载的img标签加个class名lazy，然后把src的路径赋值给data-original，如下所示：

　　<img class="lazy" data-original="images/xinan_searchLogo.png" />

然后引入jq文件，然后再把上边的js代码放上即可

思路：1、首先给所有需要延迟加载的图片，添加一个默认的图片(2.jpg)，让页面刚开始加载时只加载一张图片

　　　2、当图片显示在可视区域时，把data-original的值赋给src属性

　　   3、首页刚进入页面时有些图片就显示在可视区域内 所以要首先执行下show方法。然后再让滚轴滚动时再执行show方法