如何等到所有的图片都加载完成之后触发一次onload事件

var details_img = $(".details img");    //所有的图片
        var img_len = details_img.length;
        details_img.on(‘load‘, function() {
            if (!--img_len) {
                if (detailScroll) {
                    detailScroll.destroy();
                    detailScroll = null;
                }
                detailScroll = new IScroll(‘.bottom‘, {
                    scrollbars: true,
                    shrinkScrollbars: ‘scale‘,
                    snap: true
                });
            }
        });

对于图片的处理,例如幻灯片播放、缩放等,都是依赖于在所有图片完成之后再进行操作。

今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用 loading 的 gif 图表示正在加载中。

一、普通方法

监听 img 的 load 方法,每 load 一张图片比较一次。关键代码如下:

var num = $img.length;

$imgs.load(function() {
    num--;
    if (num > 0) {
        return;
    }
    console.log(‘load compeleted‘);
}

二、使用 jQuery 中的 Deferred 对象

Deferred 对象是从 jQuery 1.5.0 版本开始引入的一个新功能,详细介绍可以见 官方文档

简单的说,Deferred 对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题, 对那些操作提供了更好的控制,以及统一的编程接口。

阮一峰有一篇文章是介绍 Deferred 对象的,写的比较详细,对于入门比较有用。

jQuery的deferred对象详解

在这里,我们用到了:

  • deferred.resolve(): Resolve a Deferred object and call any doneCallbacks with the given args.
  • deferred.when(): Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
  • deferred.done(): Add handlers to be called when the Deferred object is resolved.

关键代码:

var defereds = [];

$imgs.each(function() {
    var dfd = $.Deferred();

    $(this).load(dfd.resolve);
    defereds.push(dfd);
});
$.when.apply(null, defereds).done(function() {
    console.log(‘load compeleted‘);
});

基本思路:
每加载完一张图片 resolve(),when() 当所有的 Deferred 完成便执行 done()。

注: 因为 $.when 支持的参数是 $.when(dfd1, dfd2, dfd3, ...),所以我们这里使用了 apply 来接受数组参数。

时间: 2024-10-05 23:54:29

如何等到所有的图片都加载完成之后触发一次onload事件的相关文章

实现页面加载完后触发select的onchange事件

1 如题,很多时候打开页面要直接在select里面执行onchange()事件进行逻辑处理,所以可以在window.load来实现即可. <script>window.onload = function(){ var obj = document.getElementById("time_type"); if(window.event) obj.fireEvent("onchange"); else{ var e = document.createEve

编写代码实现图片懒加载

1.前端性能优化的重要方案,通过图片或者数据的延迟加载,我们可以加快页面渲染速度,让第一次打开页面速度加快,只有滑动到某个区域,才加载真实的图片,这样也可以节省加载的流量, 2.处理方案 把所有需要延迟加载的图爿用一个盒子包起来,设置宽高和默认占位图.开始让所有的IMg的src为空,把真实的地址放到IMG的自定义属性上,让IMG隐藏,等到所有其他资源都加载完后,我们再开始加载图爿,对于很多图爿,需要当页面滚动时候,当前图爿完全显示出来后仔加载真实图片 原文地址:https://blog.51ct

jQuery图片预加载

jQuery图片预加载早已不是什么新鲜的技术,比如在图片轮播(一些hover事件中)时为了提高图片加载速度,这就需要用到图片预加载技术,这样图片的切换就显得流畅,这样做一定意义上提升了用户体验.我们简单看看实现方法及简单的说明:UI前端框架最新力作!有奖试读 .代码   var img = $('<img />').attr('src', 'imageurl.jpg'); jQuery创建了一个图片元素并设置了它的地址,如果将它放在document ready中处理时,当页面加载时就会告诉浏览

jQuery判断背景图片全部加载完成。。

/*var path="http://static.fzbm.com/bmcj/zmjstatic/images/"; var arr=[ //path+'img_01.png', "http://static.fzbm.com/bmcj/zmjpc/images/header_bag.jpg", path+'img_02.png', path+'img_03.png', path+'img_04.png', path+'img_05.png', path+'img

再和“面向对象”谈恋爱 - 图片预加载组件(七)

再和"面向对象"谈恋爱 - 对象简介(一)再和"面向对象"谈恋爱 - 对象相关概念(二)再和"面向对象"谈恋爱 - 面向对象编程概念(三)再和"面向对象"谈恋爱 - class(四)再和"面向对象"谈恋爱 - 继承(五)再和"面向对象"谈恋爱 - super(六) 通过前面的六篇文章已经把ES6的面向对象跟大伙说清楚了,大家最关心的应该是来个例子实战一下,别担心自行车都会有.那这篇文章通

图片预加载的几个注意点

1. 应用场景 在制作图片墙,相册这样的单页图片资源比较大的页面时,为了能让用户有流畅的使用体验,需要提前将图片缓存到本地,这就是图片预加载的用途. 2. 原理 提前将图片缓存到本地后,如果图片路径不变,页面在使用图片时,浏览器就可以直接使用缓存了.具体方法如下:js有一个Image对象,页面中每有一个标签,就说明有一个image实例.如果想预加载图片,可以提前定义image对象并指定src. 写法一 function imgPreload(url){ var img = new Image()

利用简洁的图片预加载组件提升h5移动页面的用户体验

在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压缩等方面做性能优化:另外就是可以对页面里用到的所有图片做预加载的处理,当用户打开页面的时候不立即显示第一屏,而是先显示资源加载效果,等到加载完毕,再来显示页面的主内容,这样就能解决那个问题.虽然这种加载效果占用了用户的浏览时间,但是我们可以把它做的好看有趣一点,所以也不会影

JS实现图片预加载无需等待

网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是

js图片实时加载

浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所想到的思路,如果有更好的思路,望不吝赐教. 其实实时加载图片思路很简单,页面一开始加载的时候把不需要一开始就加载的图片(如第二屏以下的图片,反正是要往下滚动才能看到的,不如把它们设置成往下滚动的时候再实时加载)路径保持到一个自定义的属性里,如:<img class="aimg" sr