图片的懒加载

最新推荐文章于 2022-09-11 16:01:28 发布

qingemengyue

最新推荐文章于 2022-09-11 16:01:28 发布

阅读量400

点赞数

分类专栏： HTML jquery javascript

本文链接：https://blog.csdn.net/qingemengyue/article/details/77608392

版权

HTML 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

17 篇文章 2 订阅

订阅专栏

jquery

8 篇文章 0 订阅

订阅专栏

当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。

1.将页面上的图片的 src 属性设为 loading.gif，而图片的真实路径则设置在 data-src 属性中，页面滚动的时候计算图片的位置与滚动的位置，当图片出现在浏览器视口内时，将图片的 src 属性设置为 data-src 的值。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Lazyload 1</title>
    <style>
        img {
        display: block;
        margin-bottom: 50px;
        height: 200px;
    }
    </style>
</head>
<body>
    <img src="images/loading.gif" data-src="images/1.png">
    <img src="images/loading.gif" data-src="images/2.png">
    <img src="images/loading.gif" data-src="images/3.png">
    <img src="images/loading.gif" data-src="images/4.png">
    <img src="images/loading.gif" data-src="images/5.png">
    <img src="images/loading.gif" data-src="images/6.png">
    <img src="images/loading.gif" data-src="images/7.png">
    <img src="images/loading.gif" data-src="images/8.png">
    <img src="images/loading.gif" data-src="images/9.png">
    <img src="images/loading.gif" data-src="images/10.png">
    <img src="images/loading.gif" data-src="images/11.png">
    <img src="images/loading.gif" data-src="images/12.png">
    <script>
        function lazyload() {
        var images = document.getElementsByTagName('img');
        var len    = images.length;
        var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历        
        return function() {
        var seeHeight = document.documentElement.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for(var i = n; i < len; i++) {
            if(images[i].offsetTop < seeHeight + scrollTop) {
                if(images[i].getAttribute('src') === 'images/loading.gif') {
                 images[i].src = images[i].getAttribute('data-src');
            }
            n = n + 1;
             }
        }
        }
    }
    var loadImages = lazyload();
    loadImages();          //初始化首页的页面图片
    window.addEventListener('scroll', loadImages, false);
    </script>
</body>
</html>

2. jQuery 插件 Lazy Load

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />

图像的地址必须放在data-original属性上，必须设置图片的width和height。给懒加载图像一个特定的class（例如:lazy）。这样很容易进行图像插件捆绑。

$(function() {
    $("img.lazy").lazyload({
         threshold : 200,   //令图片在距离屏幕 200 像素时提前加载
         event : "click",   //只有当用户点击它们才加载图片
          effect : "fadeIn"   //淡入效果效果
});
});

在做事件绑定的时候，可以对 lazyload 函数进行函数节流（throttle）与函数去抖（debounce）处理

qingemengyue

关注

0
点赞
踩
0

收藏

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

当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。1.将页面上的图片的 src 属性设为 loading.gif，而图片的真实路径则设置在 data-src 属性中，页面滚动的时候计算图片的位置与滚动的位置，当图片出现在浏览器视口内时，将图片的 src 属性设置为 data-src 的值。<!DO
复制链接

扫一扫

专栏目录