jQuery图片预加载
浏览数：35 /
时间：2015年06月09日
jQuery图片预加载早已不是什么新鲜的技术，比如在图片轮播（一些hover事件中）时为了提高图片加载速度，这就需要用到图片预加载技术，这样图片的切换就显得流畅，这样做一定意义上提升了用户体验。我们简单看看实现方法及简单的说明：UI前端框架最新力作！有奖试读
.代码 
- var img = $(‘<img />‘).attr(‘src‘, ‘imageurl.jpg‘);
.代码
- $.preloadImages = function() {
- for (var i = 0; i < arguments.length; i++) {
- $("<img />").attr("src", arguments[i]);
- }
- }
- $.preloadImages("image1.jpg","image2.jpg");
我们打开chrome浏览器，可以在控制台中Network里监视图片的加载情况，此时你会发现图片确实进行了预加载。有兴趣的朋友可以看下chrome调试js，熟悉下chrome下当前请求的监视方法，同样禁用chrome浏览器的缓存也能明显的感觉到图片预加载带来的速度提升（按F12在控制台右下角点齿轮状东东，里边有设置）。UI前端框架最新力作！有奖试读
最后我们使用append或者appendTo方法将图片放置于我们指定的元素中即可：
.代码
- $(‘#container‘).append(img);
此时的处理基本不花费时间，因为我们到这已经知道图片早已被下载了下来。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
