图片预加载

Posted 亦心晗

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片预加载相关的知识,希望对你有一定的参考价值。

//图片预加载
(function ($) {
    //imgs图片数组,参数
    function PreLoad(imgs,options){
        //传进来的如果是字符串,转成数组
        this.imgs = (typeof imgs === ‘string‘) ? [imgs] :imgs;
        //将options和default融合生成一个对象,将option覆盖default的内容声称对象。
        this.opts = $.extend({},PreLoad.DEFAULTS,options);

        this._unoredered();
    }
    
    //默认变量
    PreLoad.DEFAULTS = {
        each:null,//每一张图片加载完毕之后执行
        all:null//所有图片加载完毕之后执行
    }
    //无序加载
    PreLoad.prototype._unoredered = function(){
        var imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;

        $.each(imgs, function (i,src){
            //如果不是src就return
            if (typeof src!=‘string‘) return;
            
            var imgObj = new Image();

            $(imgObj).on(‘load error‘, function () {
                //$progress.html(Math.round((count+1)/len * 100) + ‘%‘);
                opts.each && opts.each(count);

                if(count >= len-1){
                    opts.all && opts.all();
                    //$(‘.loading‘).hide();
                }
                count++;
            });

            imgObj.src = src;
        });
    }

    $.extend({
        PreLoad:function(imgs,opts){
            new PreLoad(imgs,opts);
        }
    });
})(jQuery);

 

以上是关于图片预加载的主要内容,如果未能解决你的问题,请参考以下文章

可以直接拿来用的15个jQuery代码片段

收藏|分享前端开发常用代码片段

js 常用代码片段

关于js----------------分享前端开发常用代码片段

几个可以直接拿来用的jQuery代码片段

几个可以直接拿来用的jQuery代码片段