js图片懒加载

最新推荐文章于 2022-04-22 20:04:47 发布

唉，取个名字真难

最新推荐文章于 2022-04-22 20:04:47 发布

阅读量74

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_27369311/article/details/109670333

版权

图片懒加载

手写js

    // 获取window的引用:
    var $window = $(window);
    // 定义事件函数:
    var onScroll = function () {
        $img=$('img[data-src]')
        // 获取页面滚动的高度:  scrollTop()获取匹配元素相对滚动条顶部的偏移。
        var wtop = $window.scrollTop();//页面滚动的高度就是窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
        // 判断是否还有未加载的img:
        if ($img.length > 0) {
            // 获取可视区域高度:
            var wheight = $window.height();
            // 存放待删除的索引:
            var loadedIndex = [];
            // 循环处理数组的每个img元素:
            
            $.each($img, function (index,el) {
                // 判断是否在可视范围内:
                let self = $(el)
                if (self.offset().top - wtop < wheight) {  //$.offset().top获取匹配元素距离文本文档顶的距离。
                    // 设置src属性:
                    //self.is(':hidden')
                    self.attr('src', self.attr('data-src'));
                    // 添加到待删除数组:
                    loadedIndex.unshift(index);//从大到小排序，保证下边删除操作能顺利进行
                }
            });
            // 删除已处理的对象:
            $.each(loadedIndex, function (index) {
                $img.splice(index, 1);
            });
        }
    };
    // 绑定事件:
    $window.scroll(onScroll);
    // 手动触发一次:
    onScroll();

引入lazyload.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
</head>
<body>
    <img data-src="" alt="">
</body>
</html>
<script>
    lazyload($('img[data-src]'));
</script>

参数查看

唉，取个名字真难

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js图片懒加载

图片懒加载 // 获取window的引用: var $window = $(window); // 定义事件函数: var onScroll = function () { $img=$('img[data-src]') // 获取页面滚动的高度: scrollTop()获取匹配元素相对滚动条顶部的偏移。 var wtop = $window.scrollTop();//页面滚动的高度就是窗口顶部与文档顶部之间的距离，也就是滚
复制链接

扫一扫