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 元素中,暂时就这么理解