图片预加载（自动检测）

加载一个庞大的页面(有很多img)时，往往希望制作一个loading页来提升用户体验。

网上很多js预加载函数并不是那么智能，需要用户自己整理图片列表再传入函数中处理。

于是乎就想写个能自动检测的预加载插件

以下是插件代码：

$.fn.extend({
    /**
     * 图片预加载
     * @param {Function} callback1 : 每个图片加载完成后回调
     * @param {Function} callback2 : 全部加载完成后回调
     */
    imgPreLoader : function(callback1, callback2){
        var imgPreOptions = [],
            imgList = [],
            errorList = [],
            currentNum = 0,
            onChange = ( $.isFunction(callback1) ) ? callback1 : '',
            onComplete = ( $.isFunction(callback2) ) ? callback2 : '',
            self = this;

        var getImages = function(element){
            if($(element).find('*:not(script)').length > 0){
                $(element).find('*:not(script)').each(function(){
                    var url = "";
                    if( $(this).css('background-image') && $(this).css('background-image').indexOf('none') == -1 ) {
                        url = $(this).css('background-image');

                        if(url.indexOf('url') != -1) {
                            var temp = url.match(/url\((.*?)\)/);
                            url = temp[1].replace(/\"/g, '');
                        }
                    } else if ( $(this).get(0).nodeName.toLowerCase() == 'img' && typeof( $(this).attr('src') ) != 'undefined') {
                        url = $(this).attr('src');
                    }

                    if (url.length > 0) {
                        imgList.push(url);
                    }
                });
            }else if($(element).get(0).nodeName.toLowerCase() == 'img' && typeof($(element).attr('src')) != 'undefined'){
                imgList.push($(element).attr('src'));
            }

            loadImgList();            
        }

        var loadImgList= function(){
            for (var i = 0; i < imgList.length; i++) {
                loadImg(imgList[i]);
            }
        }

        var loadImg = function(url){
            var img = new Image();
            $(img)
            .load(function(){
                completeLoading();
            })
            .error(function(){
                errorList.push($(this).attr('src'));
                completeLoading();
            })
            .attr('src',url);
        }

        var completeLoading = function(){
            currentNum++;
            var per = Math.round((currentNum / imgList.length) * 100);        
            if(onChange) onChange(per);
            if(currentNum >= imgList.length && onComplete) {
               onComplete();
            }
        }

        getImages(this);
　　　　
        return this; // 支持链式调用
    }
});

调用方法:

// 调用方法
$('body').imgPreLoader(function(per){
    console.log(per);
},function(){
    console.log('preload completed!');
});

PS：可以根据需求自由选择预加载区域