实现图片懒加载

qq_36570062

已于 2024-04-08 00:28:34 修改

阅读量223

点赞数

分类专栏： JavaScript 文章标签：性能优化 javascript jquery

于 2020-05-13 11:36:29 首次发布

本文链接：https://blog.csdn.net/qq_36570062/article/details/106090929

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

作用

减少或延迟请求数，缓解浏览器压力，增强用户体验

法一：编码实现

思路

设置图片 src 属性默认为内存小的图片，再自定义一个 data-src 属性来存储图片的真实地址
页面初始化显示或浏览器发生滚动时，判断未加载图片是否在视窗中
通过 DOM 操作设置该区域图片的 src 属性为真实地址

代码部分

css+html

<style>
	.container {
    	max-width: 800px;
    	margin: 0 auto;
    }
    /* 清除浮动 */
    .container:after {
    	content: "";
        display: block;
        clear: both;
	}
    .container img {
        width: 50%;
        height: 260px;
        float: left;
    }
</style>
<body>
    <div class="container">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
    </div>

(1) 用Jquery实现

<script>
	// 一打开页面，加载视窗中的图片
	start(); 
    // 加载函数：遍历图片，加载视窗中未加载的图片
    function start() {
        $('.container>img').not('[data-isLoaded]').each(function () {
            var $img = $(this);//this指向img，若用箭头函数，this指向window 
            // 页面逻辑：当元素高度 <= 窗口高度+滚动条高度，意味着到达目标点，即可加载图片
            if ($img.offset().top <= $(window).height() + $(window).scrollTop()) {
                // 缓冲效果
                setTimeout(function () {
                    $img.attr('src', $img.data('src')); //把图片真实地址赋值给src属性  
                    // 性能优化：对已加载的图片，设置属性值为1作为标识，在遍历图片时不会再被加载
                    $img.attr('data-isLoaded', 1);
                }, 500)
            }
        })
    }

	// 浏览器滚动事件
    $(window).on('scroll', function () {
        start();
    })
</script>

显示图片函数中的性能优化：设计思想是每次滚动时都要对图片进行遍历，那么标记已加载过的图片，后续进行排除，只对未加载的图片进行操作，便可大大提高性能

(2) 用JS实现

<script>
	var imgs = document.querySelectorAll('img');
    lazyload(imgs);

    // 懒加载实现
    function lazyload(imgs) {
        var h = window.innerHeight || document.documentElement.clientHeight; //可视区域高度
        var s = document.documentElement.scrollTop || document.body.scrollTop; //滚动区域高度
        imgs.forEach(val => {
            if(val.dataset['isLoaded']!='1'){
                if (val.offsetTop <= (h + s)) {
                setTimeout(function () {
                    // 获取自定义属性data-src，用真图片替换假图片
                    val.src = val.dataset['src'];
                    // val['data-isLoaded'] = 1 不生效
                    val.setAttribute("data-isLoaded","1");
                }, 500)
            }
            }
        });
    }

    // 滚屏函数
    window.onscroll = function () {
        lazyload(imgs);
    }

法二：利用插件

参考博客

基于 jQuery 的图片延迟加载插件 jQuery.lazyload，使用延迟加载可提高网页下载速度
其使用方法：

引入 jquery.js 和 jquery.lazyload.js
图片的真实地址必须放在 data-original 属性中，代码如下：

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

$(function() {
    $(".lazy").lazyload({
		threshold: 200; //图片在距离屏幕 200px 时提前加载
		event: "click"; //当用户点击图片时才进行加载
		effect: "fadeIn"; //图片加载有淡入效果
	});
});

qq_36570062

关注

0
点赞
踩
1

收藏

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

作用减少或延迟请求数，缓解浏览器的压力，增强用户体验法一：编码实现实现方式设置图片src属性默认为内存小的图片，自定义一个data-src属性来存储图片的真实地址页面初始化显示或者浏览器发生滚动时，判断图片是否在视窗中通过DOM操作设置该区域图片的src属性为真实地址代码部分css+html<style> .container { max-width: 800px; margin: 0 auto; } /* 清除浮动 */
复制链接

扫一扫