图片的懒加载

来源：互联网发布：小米3支持电信4g网络吗编辑：程序博客网时间：2024/04/30 05:22

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

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）处理

阅读全文

0 0