自己做的一个纯js延迟加载图片小插件

最新推荐文章于 2025-12-15 15:15:21 发布

转载最新推荐文章于 2025-12-15 15:15:21 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xingx/p/6890955.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的图片懒加载技术，该技术通过监听滚动事件，动态替换即将进入视口的图片源，有效减少了页面初始加载时间和带宽消耗。

//scrollLoadImg.js

/*
* obj:要加载图片的容器(默认document)
* scrollObj:要滚动的容器(默认window)
* src:预加载的路径(默认'data-img')
* time:延迟加载图片(默认1秒)*/
var t;
var scrollLoadImg = function(par){
    if(arguments.length==0){
        par = {
            obj:document,
            scrollObj:window,
            src:"data-img",
            time:1000
        };
    }else{
        par = {
            obj:par.obj?par.obj:document,
            scrollObj:par.scrollObj?par.scrollObj:window,
            src:par.src?par.src:"data-img",
            time:par.time?par.time:1000
        };
    }
    this.init = function(){
        var isWindow = par.scrollObj.constructor.name==="Window";
        var isDocument = par.scrollObj.constructor.name==="HTMLDocument";
        var imageObjArr =isWindow?document.images : par.obj.getElementsByTagName("img"); //获取页面所有img标签
        var scrollTop = isWindow?document.documentElement.scrollTop || document.body.scrollTop:par.scrollObj.scrollTop; //获取页面滚动位置
        var clientHeight = isWindow?window.innerHeight:isDocument?document.documentElement.clientHeight || document.body.clientHeight:par.scrollObj.clientHeight;  //根据传入的对象获取对象可视高度(默认是window)
        for(var i = 0;i<imageObjArr.length;i++){
            var currentImg = imageObjArr[i];
            var imgTop = currentImg.offsetTop; //获取图片距离顶部位置
            if(currentImg.getAttribute("src")!==currentImg.getAttribute(par.src) && currentImg.getAttribute(par.src)!==null){
                if(imgTop>=scrollTop-clientHeight/2 && imgTop<scrollTop+clientHeight+clientHeight/2){
                    imageObjArr[i].setAttribute("src",currentImg.getAttribute(par.src));
                }
            }
        }
    }
    this.yc = function(){
        clearTimeout(t);
        t = setTimeout(function(){
                return this.init();
        },par.time);
    }
    this.yc();
    var _this = this;
    par.scrollObj.onscroll = function(){
        _this.yc();
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="scrollLoadImg.js"></script>
    <script>
        window.onload = function() {　　　　　　　　
            var content = document.getElementById("content");
            var scrollInfo = document.getElementById("scrollInfo");
            scrollLoadImg({
                   obj: content, //要加载图片的区域
                scrollObj:scrollInfo, //滚动区域，不设置的话默认是window
                time: 1000 //延迟多少毫秒加载图片(1000毫秒等于1秒)
            })　　
        }
    </script>
    <style type="text/css">
    #scrollInfo{
        height: 600px;
        overflow: auto;
        border: 1px solid blue;
    }
    #scrollInfo img {
        width: 300px;
        height: 300px;
        display: block;
    }
    </style>
</head>
<body>
    <div id="content">    
        <div id="scrollInfo">
            <img src="image/bgg.jpg" data-img="image/1.jpg" alt=""> 　　　　　　　 
            <img src="image/bgg.jpg" data-img="image/2.jpg" alt="">
            <img src="image/bgg.jpg" data-img="image/3.jpg" alt="">
            <img src="image/bgg.jpg" data-img="image/4.jpg" alt="">
            <img src="image/bgg.jpg" data-img="image/5.jpg" alt="">
            <img src="image/bgg.jpg" data-img="image/6.jpg" alt="">
            <img src="image/bgg.jpg" data-img="image/7.jpg" alt="">
            <img src="image/bgg.jpg" data-img="image/8.jpg" alt="">
            <img src="image/bgg.jpg" data-img="image/9.jpg" alt="">
        </div>
    </div>
</body>
</html>