求一个原生js实现图片延迟加载
求一个原生js实现图片延迟加载
不想用jquery
能有注释最好了,谢谢!
<div><img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" /><img src="4.jpg" /><img src="5.jpg" /></div>
------解决方案--------------------【js图片延迟加载的实现方法及思路】
------解决方案--------------------不明白你的意思 延时加载setTimeout 还是类似瀑布流?
------解决方案--------------------src设置为一个默认的小图片,用自定义属性original或者其他osrc上面的存储实际的图片地址,onscroll判断下图片是否在显示屏上,在就设置图片的src为自定义属性中的值
------解决方案--------------------function init(){
var _resultDateStr = "{'li': [{ 'url':'http://www.googuu.net/img/1.png' },{ 'url':'http://www.googuu.net/img/1.png' },{'url':'http://www.googuu.net/img/1.png''}]}";
var _jsonDate = eval('('+_resultDateStr+')');
var _arrayImg = _jsonDate.li;
for(var i=0;i<_arrayImg.length;i++){
var _links = Number(_arrayImg[i].url);
var _li = "<div class='push_div ads_push'><dl class='clearfix'><dt><a href='"+_arrayImg[i].url+"'><img src='"+_arrayImg[i].url+"' width='136' height='190'></a></dt></dl></div>";
$("#_ulorImg").append(_li);
}
}
function myScroll(){
$(window).scroll(function(){
var domHeight=$(document).height();//整个页面高度
var winHeight=$(window).height();//浏览器高度
var domScrolltop=$(document).scrollTop();//滚动高度
if(domHeight<=(winHeight+domScrolltop)) {
init();
}
});
}