意思应该是延迟加载,延迟加载主要是因为一次加载图片过多会导致网络请求过多,性能下降。所以才有延迟加载这一说。
主要思路:
在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="你的代码">
或者在其他你想要执行的时候,去触发这两条语句。比如点击,某个控件或对象获得焦点等。