求一个原生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();
			}
		});	
}