使用JQuery 的 Deferred实现图片预加载_Css3.0_css2.0_html5

夜鹰教程网-程序员的加油站

·设为首页·加入收藏

本站首页技术文章全套前端云课堂智慧校园

你好，欢迎来到夜鹰网！【去购买教程】

当前位置：文章中心 >> Css3.0_css2.0_html5

使用JQuery 的 Deferred实现图片预加载

夜鹰教程网来源：www.yyjcw.com 日期：2017-11-11 14:17:04

使用JQuery 的 Deferred实现图片预加载

    //图片预加载的解决方法使用JQuery 的 Deferred实现
    function preloadImg(list,imgs) {
        var def = $.Deferred(),
            len = list.length;
        $(list).each(function(i,e) {//遍历存储图片url的数组
            var img = new Image();
            img.src = e;
            if(img.complete) {//如果图片在缓存中
                imgs[i] = img;
                len--;
                if(len == 0) {
                    def.resolve();
                }
            }
            else {//如果图片没有在缓存中等待加载完成
                img.onload = (function(j) { //使用了闭包
                    return function() {
                        imgs[j] = img
                        len--;
                        if(len == 0) {
                            def.resolve();
                        }
                    };
                })(i);
                img.onerror = function() {
                    len--;
                    console.log('fail to load image');
                };
            }
        });
        return def.promise();//返回一个Promise对象因为在$.when()中的参数必须是Promise对象
    }
    var list = [......],
        imgs = [];
    $.when(preloadImg(list, imgs)).done(
        function() {
            //预加载结束
            //do something here
        }
    );

复制链接网友评论收藏本文关闭此页

上一条：前端开发心得体会小结下一条：不知道容器大小如何实现内容水平垂直居…

夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。详细咨询QQ：1416759661 夜鹰教程网