大图片的缓存

 

1， 假如一个页面有多张图片，那么要是全部都是 

<img src="xxx">

的形式加载的话，那么页面能卡死， 而且很不好

 

为了解决这个问题，我们需要用到缓存， 先在内存中加载，当内存加载完毕后，再修改dom 元素中的值就行了！

 

2， 下面是实现代码：

<script type="text/javascript">
			
		window.onload = function(){
			// 内存中先加载，然后当内存加载完毕时，再把内存中的数据填充到我们的 dom元素中，这样能够快速的去
			// 反应，比如网易的图片
			var img = new Image();
			img.onload = function(){
				alert('加载完毕')
				document.getElementById('bigImg').src = this.src;
			}

			img.src = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537549551&di=3f8d4d76679adcae225387f7d6b199aa&src=http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";

		}	

	</script>
	

	<img  id='bigImg' src="#" alt="">

其中有一个img.onload 就是当图片缓存到内存中完毕后，然后再修改到dom 元素中，暂时就这么理解