JS如何实现图片分段加载

JavaScript017

JS如何实现图片分段加载,第1张

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

主要思路：

在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=0i<aImg.lengthi++)    

{    

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>

用setTimeout函数啊，你可以设置时间，运行。

所有的订单都先放进一个站里面，或者数据库，或者表。都行啦。

然后每隔半小时检查一遍符合条件的数据根据需要执行相应的方法不就行了。

给每一段视频一个不显示的video标签，其preload属性设置为metadata。这样的话不会加载整个视频但是能获得每个视频的长度。

这样的话通过监听那几个标签的durationchange事件，就知道总时间了。

然后无非就是做一个可以拖动的滚动条；拖动到某个部位之后，算一下处于那段视频中间；把那段视频对应的video显示出来，并把currentTime设置到相应的时间，然后play()。

播放时通过监听timeupdate事件来更新进度条的位置。通过监听ended事件来获知一段视频已经播放结束，应该加载下一段。