图片预加载jqurey插件

最新推荐文章于 2021-05-17 17:16:24 发布

你若盛开风景自来

最新推荐文章于 2021-05-17 17:16:24 发布

阅读量124

点赞数

分类专栏： jquery 文章标签：图片预加载

本文链接：https://blog.csdn.net/li1484155613/article/details/102768626

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文深入探讨了使用jQuery实现图片预加载的技术细节，包括有序和无序加载方式，以及如何在每张图片加载完毕后执行特定操作。通过具体代码示例，展示了如何监听图片加载的完成和错误事件，并在所有图片加载完成后执行回调函数。

摘要由CSDN通过智能技术生成

//图片预加载
//li*75?img[src="facce/qq/$.gif"]
(function($){
    function Preload(imgs,options){
        this.img=(typeof imgs==='string')?[imgs]:imgs
        this.options=$.extend({},Preload.DEFAULTS,options)
        if(this.options.order==='ordered'){
            this.ordered()
        }else{
            this._unoredered()
        }
    }
    Preload.DEFAULTS={
        order:'unordered',
        each:null,//每一张图片加载完毕后执行
        all:null//所有图片中加载后执行
    }
    Preload.prototype.ordered=function(){//有序加载
        var opts=this.options,
        imgs=this.imgs,
        len=imgs.length,
        count=0;
        load()
        function load(){
            var imgObj=new Image()
            $(imgObj).on('load error',function(){
                opts.each&&each(count)
                if(count>=len){
                    opts.all&&opts.all()
                }else{
                    load()
                }
                count++
        }
    }
    Preload.prototype._unoredered=function(){//无序加载
        var imgs=this.imgs
        var opts=this.options
        var count=0
        var len=imgs.length
        $.each(imgs,function(i,src){
            if(typeof src!='string')return
            var imgObj=new Image()
            $(imgObj).on('load error',function(){
               opts.each&&opts.each(count)
               if(count>=len-1){
                   opts.all&&opts.all()
               }
               count++
            })
        })
    }
    $.extend({
        Preload:function(imgs,opts){
            new Preload(imgs,opts)
        }
    })
})(jQuery)