欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS里面的懒加载(lazyload)

程序员文章站 2022-09-14 17:14:09
懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载 涉及到图片，falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽，且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源. ......

　　懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载

　　涉及到图片，falsh资源 , iframe, 网页编辑器(类似fck)等占用较大带宽，且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源，让用户等待太久，

　　来，举个栗子，当你去东哥的绿帽网网购的时候，打开首页的时候，直接在导航栏选了商品种类跳转到了列表页，那首页下方那些未显示的区域的图片需不需要加载，当然不需要了，你根本没看他们，加载出来干啥

　　说白了就是占着茅坑不拉粑粑，那我们怎么解决呢，这时我们就该用到懒加载技术，只有当这部分图片出现在可视区内再去请求服务器。

　　懒加载的核心：在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)

　　下面来一个大栗子

　　来，把朕的代码例子呈上来

　　

　　例子的思路：页面渲染时将src路径放到自定义属性中去，这样页面加载时图片就不会去请求服务器，当图片滚动到可视区内时，获取它的自定义属性并赋值给src

　　这是页面的布局，图片路径注意改一下子

　　

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style>
        *{margin:0;padding:0;}
        img{
            width: 200px;
            height: 200px;
            display: block;
            float: left;
        }
    </style>
</head>
<body>
    <img src="" data-url ="img/1.jpg">
    <img src="" data-url ="img/2.jpg">
    <img src="" data-url ="img/3.jpg">
    <img src="" data-url ="img/4.jpg">
    <img src="" data-url ="img/5.jpg">
    <img src="" data-url ="img/6.jpg">
    <img src="" data-url ="img/7.jpg">
    <img src="" data-url ="img/8.jpg">
    <img src="" data-url ="img/9.jpg">
    <img src="" data-url ="img/10.jpg">
    <img src="" data-url ="img/1.jpg">
    <img src="" data-url ="img/2.jpg">
    <img src="" data-url ="img/3.jpg">
    <img src="" data-url ="img/4.jpg">
    <img src="" data-url ="img/5.jpg">
    <img src="" data-url ="img/6.jpg">
    <img src="" data-url ="img/7.jpg">
    <img src="" data-url ="img/8.jpg">
    <img src="" data-url ="img/9.jpg">
    <img src="" data-url ="img/10.jpg">
    <img src="" data-url ="img/1.jpg">
    <img src="" data-url ="img/2.jpg">
    <img src="" data-url ="img/3.jpg">
    <img src="" data-url ="img/4.jpg">
    <img src="" data-url ="img/5.jpg">
    <img src="" data-url ="img/6.jpg">
    <img src="" data-url ="img/7.jpg">
    <img src="" data-url ="img/8.jpg">
    <img src="" data-url ="img/9.jpg">
    <img src="" data-url ="img/10.jpg">
    <img src="" data-url ="img/1.jpg">
    <img src="" data-url ="img/2.jpg">
    <img src="" data-url ="img/3.jpg">
    <img src="" data-url ="img/4.jpg">
    <img src="" data-url ="img/5.jpg">
    <img src="" data-url ="img/6.jpg">
    <img src="" data-url ="img/7.jpg">
    <img src="" data-url ="img/8.jpg">
    <img src="" data-url ="img/9.jpg">
    <img src="" data-url ="img/10.jpg">

 

　　来 上关键的js代码

<script>
    //页面加载时先调用一次loadimg函数
    loadimg()
    //添加滚动事件
    window.onscroll = function () {
        loadimg()
    }

    function loadimg() {
        var ih = document.documentelement.clientheight;
        var t = document.documentelement.scrolltop || document.body.scrolltop;
        var img = document.getelementsbytagname("img");
        for (var i = 0; i < img.length; i++) {
            if ((!img[i].bstop) && offsettop1(img[i]) < (ih + t)) {
                //注意  真正在页面上使用一定要加开关,不加开关每次条件符合时都会重新请求服务器，还不如不用懒加载
                //理解不了啥意思的同学，可以把img[i].bstop删去试试
                //同时不要用offsettop  
                //因为offsettop是获取离已定位的父元素的top值  
                //所以自己封装一个计算offsettop的函数
                var src = img[i].getattribute("data-url");
                img[i].src = src;
                img[i].bstop = true;
                console.log(1)
            }
        }
    }

    //封装获取元素离上方的高度的函数
    function offsettop1(obj) {
        var t = obj.offsettop;
        while (obj.offsetparent) {
            obj = obj.offsetparent;
            t = t + obj.offsettop;
        }
        return t;
    }
</script>

 

上一篇： 关于辉腾车主洗车的笑话

下一篇： spark 基础开发 Tips总结

推荐阅读