使用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