js懒加载的实现

最新推荐文章于 2023-08-28 09:54:00 发布

子义间

最新推荐文章于 2023-08-28 09:54:00 发布

阅读量347

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/D_Z_Yong/article/details/102563561

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

懒加载其实就是减少一次性对服务器请求资源，导致性能降低的解决方法，
比如说商品加载的时候由于商品图片太多，如果一次性加载的话，会导致网页加载慢，从而用户体验差，
懒加载原理其实就是在img标签里创建一个data-xxx的自定义属性，这个自定义属性存放的就是真实的img网络路径，而所有图片的src则存放一张空白页，这样子一开始加载页面的时候，只需要访问一次即可，当滚动条滚到图片到可视区域的底部时，则吧自定义属性的值放到img的src上从而进行访问，
代码：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="main">
        <div style="width: 100%;height: 623px;margin-bottom: 50px;"v-for="(item) of images" :key="item.id">
            <img src="../img/1.jpg" :data-src="item.src">
        </div>
    </div>
</div>
</body>
</html>

js
这里需要先引入jq

// $(window).height()//可视区域的高度
// $(document).scrollTop()//滚动条滚动的距离
$(document).ready(function () {
    var imgs = document.querySelectorAll('.main img');
    function getTop(e){
        return e.offsetTop;//获取滚动条的滚到距离
    }
    function lazyload(imgs){
        var h=$(window).height()
        //滚动区域高度
        var s = document.documentElement.scrollTop || document.body.scrollTop;
        for(let i=0;i<imgs.length;i++){
            //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载

            if ((h+s)>getTop(imgs[i])) {
                // (function (i) {//使用闭包是防止在for循环中没有用let而是用了var的时候使用
                        //setTimeout(function(){
                          //  var src=$(imgs[i]).attr("data-src")
                           // $(imgs[i]).attr("src",src)
                        //},2000)
                    // }
                // )(i)
                setTimeout(function(){
                   var src=$(imgs[i]).attr("data-src")
                   $(imgs[i]).attr("src",src)
                },2000)
            }
        }
    }
    lazyload(imgs);
    $(window).scroll(function(){//滚动条滚动时触发
        lazyload(imgs);
    });

})

var vm = new Vue({
    el: '#app',
    data: {
        images: [],
    },
    methods: {},
    created() {
        var that = this;
        $.ajax({
            url: '/index',//网络数据链接
            type: 'get',
            dataType: 'json',
            success: function (data) {
                that.images = data;
                //console.log(data)
            },
            error: function (data) {
            }
        })

    },
})

在这里插入图片描述

子义间

关注

0
点赞
踩
1

收藏

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

懒加载其实就是减少一次性对服务器请求资源，导致性能降低的解决方法，比如说商品加载的时候由于商品图片太多，如果一次性加载的话，会导致网页加载慢，从而用户体验差，懒加载原理其实就是在img标签里创建一个data-xxx的自定义属性，这个自定义属性存放的就是真实的img网络路径，而所有图片的src则存放一张空白页，这样子一开始加载页面的时候，只需要访问一次即可，当滚动条滚到图片到可视区域的底部时，则...
复制链接

扫一扫