jQuery图片预加载早已不是什么新鲜的技术,比如在图片轮播(一些hover事件中)时为了提高图片加载速度,这就需要用到图片预加载技术,这样图片的切换就显得流畅,这样做一定意义上提升了用户体验。我们简单看看实现方法及简单的说明:UI前端框架最新力作!


.代码  


1. var img = $('<img />').attr('src', 'imageurl.jpg');

.代码  


1. $.preloadImages = function() {  
2. 0; i < arguments.length; i++) {  
3. "<img />").attr("src", arguments[i]);  
4.   }  
5. }  
6. $.preloadImages("image1.jpg","image2.jpg");

 我们打开chrome浏览器,可以在控制台中Network里监视图片的加载情况,此时你会发现图片确实进行了预加载。有兴趣的朋友可以看下chrome调试js,熟悉下chrome下当前请求的监视方法,同样禁用chrome浏览器的缓存也能明显的感觉到图片预加载带来的速度提升(按F12在控制台右下角点齿轮状东东,里边有设置)。UI前端框架最新力作!有奖试读

最后我们使用append或者appendTo方法将图片放置于我们指定的元素中即可:


.代码  


1. $('#container').append(img);

 此时的处理基本不花费时间,因为我们到这已经知道图片早已被下载了下来。