使用jQuery.imgpreload.js插件实现预加载图片提高用户体验

所谓“图片的预加载”就是指:正常情况下,点击一张比较大的图片,那图片会像‘瀑布’一样慢慢载入到页面,而预加载的效果,就是点击后图片,先进行预加载 (此刻你可以设置一个简单的Loading等待样式),然后等图片加载完毕后,在一次性将图片显示出来,不会有‘瀑布状’的效果,提高用户体验。

插件简介

jQuery imgpreload插件允许你预载图像之前和/或之后DOM加载。

插件选项

以下是由图像预加载插件提供的选项,你可以在全局范围内改变或重写默认通过设置对象的imgpreload方法。

$.fn.imgpreload.defaults = {
    each: null // callback invoked when each image in a group loads
    , all: null // callback invoked when when the entire group of images has loaded
};
插件使用

以下说明使用插件来预加载图像后DOM加载。一个重要的注意,在这种情况下,你是强迫预能够利用回调,浏览器应该立即加载图像。

$('#content img').imgpreload(function(){
    // this = array of dom image objects
    // check for success with: $(this[i]).data('loaded')
    // callback executes when all images are loaded
});
$('#content img').imgpreload({
    each: function(){
        // this = dom image object
        // check for success with: $(this).data('loaded')
        // callback executes when each image loads
    },
    all: function(){
        // this = array of dom image objects
        // check for success with: $(this[i]).data('loaded')
        // callback executes when all images are loaded
    }
});
预加载图片在DOM加载,例如在文档的头部,你必须使用特定的图像路径。
$.imgpreload('/images/a.gif',function(){
    // this = array of dom image objects
    // check for success with: $(this[i]).data('loaded')
    // callback
});
 
$.imgpreload(['/images/a.gif','/images/b.gif'],function(){
    // this = array of dom image objects
    // check for success with: $(this[i]).data('loaded')
    // callback executes when all images are loaded
});
 
$.imgpreload(['/images/a.gif','/images/b.gif'],{
    each: function()    {
        // this = dom image object
        // check for success with: $(this).data('loaded')
        // callback executes on every image load
    },
    all: function()    {
        // this = array of dom image objects
        // check for success with: $(this[i]).data('loaded')
        // callback executes when all images are loaded
    }
});
插件下载:

Github地址:http://github.com/farinspace/jquery.imgpreload

关键词: jquery插件