浅谈图片懒加载

最新推荐文章于 2022-04-21 08:42:00 发布

香蕉芭辣

最新推荐文章于 2022-04-21 08:42:00 发布

阅读量284

点赞数 1

本文链接：https://blog.csdn.net/weixin_44049725/article/details/104779965

版权

懒加载

1.概念：
访问页面时，先把img元素的背景图片src替换成一张占位图，这样只需请求一次，当图片出现在浏览器的可视区域内时，再设置图片的真实路径，显示图片。

2.优点：
页面长图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节约流量。

3.步骤：
页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascript设置了图片路径，浏览器才会发送请求。

懒加载先在页面中把需要延迟加载的图片统一使用一张占位图进行占位，把真正的路径存在元素data-src属性里。
页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将 data-src的值取出来存放到src中。
在滚轮事件中重复判断图片是否进入视中，如果在，则将data-url的值取出来存放到src中。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <title>图片懒加载</title>
</head>
<style>
    .wrapper{
        max-width: 800px;
        margin: 0 auto;
    }
    .wrapper::after {
        content: '';
        display: block;
        clear: both;
    }
    .wrapper img {
        float: left;
        width: 50%;
    }
</style>
<body>
    <div class="wrapper">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
    </div>
    <script>
	     //打开页面 调用一次 
        start()
        $(window).on('scroll', function() {
                start() //滚动页面时 调用一次
            })
        //加载函数 
        function start() {
            $('.wrapper img').not('[data-isLoaded]').each(function() {
                var $node = $(this)
                if (isShow($node)) {
                    //设置一个定时器起到缓冲效果 
                    setTimeout(function() {
                        loadIng($node)
                    }, 500)

                }
            })
        }
        // 页面逻辑
        function isShow($node) {
            // 当一个元素出现在我们眼前（小于窗口高度）上窗口滚动的高度的时候就意味着到达目标点 
            // 可以开始加载图片或者其他内容
            return $node.offset().top <= $(window).height() + $(window).scrollTop()
        }
        // 显示状态
        function loadIng($img) {
            // 获取目标元素 并替换 
            $img.attr('src', $img.attr('data-src'))
            //性能优化 进行判断 已经加载的不会再进行加载  
            $img.attr('data-isLoaded', 1)
        }
    </script>
</body>
</html>

香蕉芭辣

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
浅谈图片懒加载

懒加载1.概念：访问页面时，先把img元素的背景图片src替换成一张占位图，这样只需请求一次，当图片出现在浏览器的可视区域内时，再设置图片的真实路径，显示图片。2.优点：页面长图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节约流量。3.步骤：页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascrip...
复制链接

扫一扫