jquery实现图片懒加载

最新推荐文章于 2023-08-05 14:21:04 发布

原创最新推荐文章于 2023-08-05 14:21:04 发布 · 490 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

本文详细描述了一个使用jQuery编写的图片滚动懒加载脚本，当图片位于视口外时，会检测其在窗口滚动过程中的位置，只有当图片进入可视区域且src为空或未定义时，才更换为预设的`lan-src`属性值。

jquery部分

 $(function () {
        function lanjiazai() {
            for (var i = 0; i <= $('body').find("img").length - 1; i++) {
                obj = $('body').find("img:eq(" + i + ")");
                obj.offset().top;
                wh = $(window).height();
                $(document).scrollTop();
                var xh = wh - (obj.offset().top - $(document).scrollTop());
                var srcbooleans = typeof (obj.attr("src")) == "undefined" || obj.attr("src") == "";
                if (xh > 0 && srcbooleans) {
                    var lansrc = $('body').find("img:eq(" + i + ")").attr("lan-src");
                    $('body').find("img:eq(" + i + ")").attr("src", lansrc)
                }
            }
        }
        $(document).scroll(function () {
            lanjiazai();
        })
        lanjiazai()
    })

页面