图片预加载

最新推荐文章于 2024-09-19 11:52:56 发布

转载最新推荐文章于 2024-09-19 11:52:56 发布 · 187 阅读

js 同时被 2 个专栏收录

21 篇文章

订阅专栏

转载

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片懒加载技术，该技术能够提高网页加载速度，并改善用户体验。通过监听滚动事件来动态加载视口内的图片，有效减少初始加载时间。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js 实现图片预加载 加载完后执行动作</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #div1 {
        width: 520px;
        margin: 30px auto;
        border: 1px solid red;
        overflow: hidden;
    }

    li {
        width: 160px;
        height: 160px;
        float: left;
        list-style: none;
        margin: 5px;
        background: url(loading.gif) center center no-repeat;
        border: 1px dashed green;
    }
    img{
        width:100%
    }
</style>
<div id="div1">
    <ul>
        <li data-src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg"></li>
        <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg"></li>
        <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg"></li>
        <li data-src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg"></li>
        <li data-src="http://dl.bizhi.sogou.com/images/2014/12/02/986640.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170473_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170475_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170477_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
    </ul>
</div>
<script>
    function setImg(index){
        var oDiv=document.getElementById("div1")
        var oUl=oDiv.children[0];
        var aLi=oUl.children;
        if (aLi[index].dataset) {
            var src=aLi[index].dataset.src;
        } else{
            var src=aLi[index].getAttribute('data-src');
        }
        var oImg=document.createElement('img');
        oImg.src=src;
        if (aLi[index].children.length==0) {
            aLi[index].appendChild(oImg);
        }
    }
    //获得对象距离页面顶端的距离
    function getH(obj) {
        var h = 0;
        while (obj) {
            h += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return h;
    }
    window.onscroll = function () {
        var oDiv = document.getElementById('div1');
        var oUl = oDiv.children[0];
        var aLi = oUl.children;

        for (var i = 0, l = aLi.length; i < l; i++) {
            var oLi = aLi[i];
            //检查oLi是否在可视区域
            var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
            var h = getH(oLi);
            if (h < t) {
                setTimeout("setImg(" + i + ")", 500);
            }
        }
    };
    window.onload = function () {
        window.onscroll();
    };
</script>