图片延迟加载

最新推荐文章于 2022-05-21 21:05:45 发布

原创最新推荐文章于 2022-05-21 21:05:45 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

例子专栏收录该内容

35 篇文章

订阅专栏

页面中图片比较多，用到一个图片延迟加载的效果

主要原理是判断当图像出现在当前窗口的时候才显示src 中的属性值
核心代码是这里

$(window).scroll(function  () { // 滚动的时候判断显示
                    var srcollHeigt = $(window).scrollTop();
                    $("img").each(function  () {
                        var getHeight = $(this).offset().top;
                        if (getHeight-srcollHeigt < windowHeight  ) {
                            $(this).attr("src", $(this).attr("data-src") )
                        } 
                    })
                })

如果页面是在中间进行重加载，那就是需要考虑，当图片的位置处在当前窗口显示区域时候要加载图片

所以判断条件是，当图片头部或者图片底部处在当前窗口内，此图片进行加载

(getBottomHeight>srcollHeigt && getBottomHeight < srcollHeigt + windowHeight)
   ||
(getTopHeight<srcollHeigt + windowHeight &&  getTopHeight > srcollHeigt )

点击查看实例

其实网页中关于图片的加载问题，还有一种是预加载，就是你可以判断用户的下一步行为，提前将网页的内容加载出来
参考张鑫旭老师的这篇文章

这里提到的H5属性prerender prefetch 相关介绍在这里
1 H5新特性

2 prerender prefetch