JS如何实现图片分段加载

JavaScript023

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>

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<script>标签，输入js代码：$('body').append('<img src="https://www.baidu.com/img/bd_logo1.png" />')。

3、浏览器运行index.html页面，此时图片被js成功显示到页面上。

用javascript , var object= document.getElementById("img1")object.src="static/picture/1.jpg"

如果你想让他在页面加载时就执行的话，在<body onload="你的代码">

或者在其他你想要执行的时候，去触发这两条语句。比如点击，某个控件或对象获得焦点等。