网页图片预加载技术

说完了图片的延时加载，再来说一下图片的预加载。我们经常可以看到浏览器在加载大图的时候，通过自上而下这样铺过来，这样一来一是对用户体验不好，而是在图片下载完之前我们完全不知道图片大小，不利于控制网页界面。那么有没有一种方法，能让图片整体一次加载到网页上呢，答案是有的，那就是图片预加载技术。来看下面一个例子：

<script>
function preloadimg(url,callback){
var Img=new Image();
Img.onload=callback;
Img.src=url;
}
window.onload=function(){
preloadimg("http://localhost/example.jpg",function(){document.getElementsByTagName("img"[0]
.src="http://localhost/example.jpg"});
}
</script>

看完图片的延时加载，看这个其实非常简单了，及时基本原理就是先用JS获取到服务上的图片，获取到之后，浏览器会缓存起来，等到需要的时候，我们在HTML插入图片，浏览器会直接使用缓存的图片。这样，图片预加载技术可以让图片在用户不知晓的情况下就完成了下载，用户不必在去漫长的等待，可以说，对于提高网站的用户体验来说是非常有用的。如果需要一次加载图片比较多，preloadimg函数的第一个参数可以换成一个数组，再在函数内部对数组做一次遍历，就可以把所有图片都加载到。图片预加载技术在图片分享网站，常见的图片新闻网站应用得比较多。
另外说一点，实际上当用户第一次进入网站时，一次性预加载过多图片对网站的速度影响也是比较大的，这时候，我们可以通过跟踪用户行为来实现加载，如在一个图片新闻网站，用户一次点击一个图片，当用户查看这个页面的时候，我们把下一张图片加载好，以此类推。这样不仅可以提高用户体验，还充分考虑到了服务器负载和宽带。