【前端优化】图片延迟加载Lazy-loading的原理与简单实现

最新推荐文章于 2024-05-30 17:38:42 发布

weixin_33682790

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量165

点赞数

原文链接：http://www.cnblogs.com/lijie33402/p/4662094.html

版权

1.什么是lazy-loading

图片“懒加载”

为img标签src设置统一的图片链接，而将真实链接地址装在自定义属性中。
所以开始时候图片是不会加载的，我们将满足条件的图片的src重置为自定义属性便可实现延迟加载功能

2.实现方法

思想其实很简单，就是当图片相对于视口的距离小于视口高度的时候就置换图片的src！

而图片的相对于视口的距离用getBoundingClientRect()简直so easy。

3.demo代码

<!DOCTYPE html>
<html>

<head>
    <title>lazy loading</title>
    <style type="text/css">
    img {
    display: block;
    margin: 600px 100px;
    }
</style>
</head>

<body>
    <div class="zone">
        <img width="612" height="612" data-src="http://farm8.staticflickr.com/7060/6969705425_0905bf6bba_o.jpg" src="img/loading.png" class="lazy">
        <img width="612" height="612" data-src="http://farm8.staticflickr.com/7203/6969484613_0ee3af0144_o.jpg" src="img/loading.png" class="lazy">
        <img width="612" height="612" data-src="http://farm8.staticflickr.com/7207/6821596428_cdae70e306_o.jpg" src="img/loading.png" class="lazy">
        <img width="612" height="612" data-src="http://farm8.staticflickr.com/7037/6965140403_9fbb5e7f96_o.jpg" src="img/loading.png" class="lazy">
    </div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        function loadImage (el, fn) {
            src = el.getAttribute('data-src');
            el.src = src;
            fn? fn() : null;
        }
        function elementInViewport(el) {
            var rect = el.getBoundingClientRect()
            
            return (
            rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
            )
        }
        
        var query = $('.lazy'),
            images = new Array(),
            processScroll = function() {
                for (var i = 0; i < images.length; i++) {
                    if (elementInViewport(images[i])) {
                        loadImage(images[i], function() {
                            images.splice(i, 1);
                            console.log(images.length)
                        });
                    }
                };
            };
        
        for (var i = 0; i < query.length; i++) {
            images.push(query[i]);
        };
        window.addEventListener('scroll', processScroll);

    })
</script>
</body>

</html>

4.问题与优化

于是功能便实现了，但是其实也有很多问题，比如打开页面，然后又点去别的窗口，看了部av回来后本以为这个页面图片已经缓冲好了结果尼玛啊拉下去还是要重新加载....所以需要判断这种情况，今天没时间了以后再针对这个写一下吧。

5.参考资料

CSS-tricks

另一个视角来看

6.代码勘误

用for循环遍历的话，会有问题，因为数组也在动态的变化，

Javascript 在 for in 或 foreach 遍历中，会自动跳过 undefined 元素，而普通 for 遍历则不会。

processScroll = function() {
    var len = images.length;
    for (var i in images) {
        if (elementInViewport(images[i])) {
            loadImage(images[i], function() {
                delete images[i];
                console.log(i);
            });
        }
    };
};

转载于:https://www.cnblogs.com/lijie33402/p/4662094.html

weixin_33682790

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端优化】图片延迟加载Lazy-loading的原理与简单实现

1.什么是lazy-loading图片“懒加载”为img标签src设置统一的图片链接，而将真实链接地址装在自定义属性中。所以开始时候图片是不会加载的，我们将满足条件的图片的src重置为自定义属性便可实现延迟加载功能2.实现方法思想其实很简单，就是当图片相对于视口的距离小于视口高度的时候就置换图片的src！而图片的相对于视口的距离用getBoundingClientRect()简直so ...
复制链接

扫一扫