当前位置:jQuery学习 > jQuery > jQuery图片预加载

jQuery图片预加载

时间:2014-06-03QQ群:116983258

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

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

jQuery创建了一个图片元素并设置了它的地址,如果将它放在document ready中处理时,当页面加载时就会告诉浏览器去加载指定的图片。当然大多数情况我们不会这么做,否则会出现页面一直在等待图片加载的现象。而当用户在刚打开某个图片专辑的时候,我们可以将要预加载的图片进行这样的处理,因为我们可以预见用户继续浏览下张图片的可能性很大。我们更可以根据图片的命名规则一次预加载特定几张图片,而不是一下子把所需图片都加载下来,网上看到这么段小代码:

$.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在控制台右下角点齿轮状东东,里边有设置)。

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

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

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

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-image-preload.html

大家说了些什么

  1. 1. 个人博客leiboy.com 2014-06-04 13:09

    这个功能很不错,能提高用户体验

  2. 2. 问鼎 2015-04-21 20:54

    不错,转走了.

所有话题