纯js 图片异步加载原理及实现

最近自己做了一个个人网站 茶余饭后网 http://www.cyfhw.top。

在做页面优化时，首先是 js 异步加载。其次就是 图片异步加载。

关于页面优化 可以看：雅虎网站页面性能优化的34条黄金守则http://blog.youkuaiyun.com/hch126163/article/details/5966021

做图片异步加载时，我第一次用了最简单的方法。

直接后台 修改 img src 属性为 data-src 属性。浏览器不认识 data-src ，页面加载时，浏览器就不会去加载图片。

js 修改 img  data-src 属性为 src，此时 浏览器 就会去下载图片了。 图片异步加载，完美实现，测试也没什么问题。

js 代码如下：

var imgs = document.getElementsByTagName("img");
	for(var i=0,l=imgs.length;i<l;i++){
  
		var url = imgs[i].getAttribute("data-src");
		if(!imgs[i].src && url){
			imgs[i].src = url;
		}
	}

这个代码用了一段时间，也没发现什么问题。我个人认为，一个页面图片不多【小于20张】的情况下，这样的方式异步加载完全没有问题！