JS如何实现图片分段加载

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS如何实现图片分段加载相关的知识，希望对你有一定的参考价值。

我的一个页面有大量图片组成，大楷100张，我不想让浏览器一次性并发下载完，我想用JS实现：打开页面下载10张，暂停20秒，再下载10张，以此类推。这样可以吗，怎么实现呢？

意思应该是延迟加载，延迟加载主要是因为一次加载图片过多会导致网络请求过多，性能下降。所以才有延迟加载这一说。

主要思路：

    在html引入图片是，不要用src直接引入图片路径，

    定一个_src私有属性存储图片路径。

    当页面加载时，先加载可视区的图片，即将私有属性_src 修改为src。

下面是思路的代码实现：

<style>    
* margin:0px; padding:0px;    
ul width:996px; overflow:hidden; border:1px solid #ccc; margin:10px auto;    
li list-style:none; float:left; margin:10px; width:300px; border:1px solid yellow; height:200px;    
img width:100%; display:block; height:100%    
</style>    
<script>    
window.onload=function()    
var aImg = document.getElementsByTagName(\'img\');    
timeOut();    
window.onscroll = timeOut;    
function timeOut()    
    
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    
var clientHeight = document.documentElement.clientHeight;    
var top = scrollTop + clientHeight;    
    
for(var i=0;i<aImg.length;i++)    
    
var oImgTop = getPos(aImg[i]).top;    
if(top > oImgTop)    
    
aImg[i].src = aImg[i].getAttribute(\'_src\');    
    
    
    
function getPos(obj)    
    
var left = 0;    
var top = 0;    
while(obj)    
    
left += obj.offsetLeft;    
top += obj.offsetTop;    
obj = obj.offsetParent;    
    
return \'left\':left,\'top\':top;    
    
;    
</script>    
</head>    
<body>    
<ul>    
<li><img _src="img/b1.jpg" /></li>    
<li><img _src="img/b2.jpg" /></li>    
<li><img _src="img/b3.jpg" /></li>    
<li><img _src="img/b4.jpg" /></li>    
<li><img _src="img/b5.jpg" /></li>    
<li><img _src="img/b6.jpg" /></li>    
<li><img _src="img/b7.jpg" /></li>    
<li><img _src="img/b8.jpg" /></li>    
<li><img _src="img/b9.jpg" /></li>    
<li><img _src="img/b10.jpg" /></li>    
<li><img _src="img/b1.jpg" /></li>    
<li><img _src="img/b2.jpg" /></li>    
<li><img _src="img/b3.jpg" /></li>    
<li><img _src="img/b4.jpg" /></li>    
<li><img _src="img/b5.jpg" /></li>    
<li><img _src="img/b6.jpg" /></li>    
<li><img _src="img/b7.jpg" /></li>    
<li><img _src="img/b8.jpg" /></li>    
<li><img _src="img/b9.jpg" /></li>    
<li><img _src="img/b10.jpg" /></li>    
<li><img _src="img/b1.jpg" /></li>    
<li><img _src="img/b2.jpg" /></li>    
<li><img _src="img/b3.jpg" /></li>    
<li><img _src="img/b4.jpg" /></li>    
<li><img _src="img/b5.jpg" /></li>    
<li><img _src="img/b6.jpg" /></li>    
<li><img _src="img/b7.jpg" /></li>    
<li><img _src="img/b8.jpg" /></li>    
<li><img _src="img/b9.jpg" /></li>    
<li><img _src="img/b10.jpg" /></li>    
<li><img _src="img/b1.jpg" /></li>    
<li><img _src="img/b2.jpg" /></li>    
<li><img _src="img/b3.jpg" /></li>    
<li><img _src="img/b4.jpg" /></li>    
<li><img _src="img/b5.jpg" /></li>    
<li><img _src="img/b6.jpg" /></li>    
<li><img _src="img/b7.jpg" /></li>    
<li><img _src="img/b8.jpg" /></li>    
<li><img _src="img/b9.jpg" /></li>    
<li><img _src="img/b10.jpg" /></li>    
</ul> 参考技术A 你可以写一个函数，来判断当前显示到了哪个区域，然后显示本区域的图片.这个其实你都不用自己去做了，使用JSON自己就带有这样的功能，应用和更改起来都比较方便，相率也非常优秀。 参考技术B 这里有一个延迟加载效果 可以实现你的效果

参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?3=i&id=11716

本回答被提问者采纳

js实现图片懒加载

图片懒加载

现如今，网站载有的信息量越来越大，其中图片占据着很大一部分，这样一来可以使整个页以面图文结合的形式展现，更加美观。

然而问题来了，如果是一个图片列表页，虽然好看，但是相关图片的加载要耗费非常长的时间，等待图片一格一格的加载，实在让人抓狂，如何优化此类页面呢？

解决的方法有两种（笔者自己总结，欢迎在文章评论中给我留言介绍其它方法）：
1.利用ajax技术将此类页面做成瀑布流
2.图片懒加载

综上所述，如果在没有ajax支持的情况下，图片懒加载是一个非常好的选择。

原理：

页面加载后只让文档可视区内的图片显示，其它不显示，随着用户对页面的滚动，判断其区域位置，生成img标签，让到可视区的图片加载出来（正所谓响应了党的号召：让一部分人先富起来，从而带动其他人富起来，最终实现共同富裕）。

所用相关技术：
给img的父级加属性 (例如data-src），将图片的地址赋值给他，这样就生成img标签后再把data-src的值赋给img的src（通过dataset.src或者getAttribute(‘src’),再赋值给img.setAttribute(‘src’)）。

css部分

        *{margin:0;padding:0;}
        ul{overflow:hidden;}
        li{list-style:none;width:10rem;height:12rem;border:1px solid #ccc;box-sizing:border-box;-webkit-box-sizing:border-box;float:left;overflow:hidden;position:relative;}
        li i{width:20px;height:20px;border-radius:20px;position:absolute;border:2px solid #6feb95;z-index:0;left:50%;top:50%;margin-top:-11px;margin-left:-11px;animation:move 1s infinite;-webkit-animation:move 1s infinite;}
        li i:before{position:absolute;width:5px;height:5px;border-radius:4px;content:'';box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;background:#fff;border:1px solid #fff;top:-3px;left:50%;margin-left:-3px;}
        img{vertical-align:middle;border-width:0;width:100%;position:relative;z-index:1;}
        @keyframes move{
            0%{
                transform:rotateZ(0);
            }
            100%{
                transform:rotateZ(360deg);
            }
        }
        @-webkit-keyframes move{
            0%{
                -webkit-transform:rotateZ(0);
            }
            100%{
                -webkit-transform:rotateZ(360deg);
            }
        }

这里用css3写了一个可以循环转动的loading，
不用设计，css制作各种loading……

html部分

<ul>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
    </ul>

js部分

/* 获取节点 */    
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');

/* 创建img标签函数 */    
function createImg(obj){
    var src = '';
    if(obj.dataset.src){
        src = obj.dataset.src;
    }else{
        src = obj.getAttribute('data-src');
    }
    if(obj.children.length <= 1){
        var img = document.createElement('img');
        img.src = src;
        obj.appendChild(img);
    }
}

/* 计算节点到文档顶部的距离 */    
function getTop(obj){
    var h = 0;
    while(obj){
        h += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return h;
}
    
/* 滚动实时计算所到区域并进行相关计算 */
window.onscroll = function(){
    var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);
    for(var i=0;i<aLi.length;i++){
        if(getTop(aLi[i]) < t){  
            setTimeout('createImg(aLi['+i+'])',500)
        }
    } 
}

/* 页面加载完便执行一次滚动函数 */
window.onload = function(){
    window.onscroll();
}

# 完整代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>图片懒加载</title>
    <style>
        *{margin:0;padding:0;}
        ul{overflow:hidden;}
        li{list-style:none;width:50%;height:12rem;border:1px solid #ccc;box-sizing:border-box;-webkit-box-sizing:border-box;float:left;overflow:hidden;position:relative;}
        li i{width:20px;height:20px;border-radius:20px;position:absolute;border:2px solid #6feb95;z-index:0;left:50%;top:50%;margin-top:-11px;margin-left:-11px;animation:move 1s infinite;-webkit-animation:move 1s infinite;}
        li i:before{position:absolute;width:5px;height:5px;border-radius:4px;content:'';box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;background:#fff;border:1px solid #fff;top:-3px;left:50%;margin-left:-3px;}
        img{vertical-align:middle;border-width:0;width:100%;position:relative;z-index:1;}
        @keyframes move{
            0%{
                transform:rotateZ(0);
            }
            100%{
                transform:rotateZ(360deg);
            }
        }
        @-webkit-keyframes move{
            0%{
                -webkit-transform:rotateZ(0);
            }
            100%{
                -webkit-transform:rotateZ(360deg);
            }
        }

    </style>
    <script>
        document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/20 + 'px';
    </script>
</head>
<body>
    <ul>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
        js图片延迟加载


 如何实现图片加载中，会有一个圈圈在动的效果


 js实现图片懒加载


 关于js或jquery进度条实现？


 js如何实现上拉加载更多...


 使用jquery.masonry.min.js 插件时，在页面底部添加加载更多按钮，实现点击按钮后瀑布流才加载图片出来。