首页 新闻 赞助 找找看

前端问题,如何在多张img加载后执行逻辑?

0
[待解决问题]

有个div,交互过程中会动态往其中添加若干img,这些img有可能都加载成功,也有可能都加载失败,我想在都加载失败时做些事,比如把div的内容改成【无图片】几个字,但关键是怎样才能得到【都加载失败时】这个时机,请指点,谢谢。

ahdung的主页 ahdung | 菜鸟二级 | 园豆:206
提问于:2018-01-12 12:25
< >
分享
所有回答(2)
0

 加载失败没有回调函数吗

顾星河 | 园豆:7169 (大侠五级) | 2018-01-12 13:19

有,事实上现在就是用onerror,在回调里计数,直到全部失败再do something。但是不确定是不是有更好的做法,所以来问问。

支持(0) 反对(0) ahdung | 园豆:206 (菜鸟二级) | 2018-01-12 15:56
0
function preloadImages(arr) {
  var dfd = new $.Deferred()
  var newimages = []
  var i = 0
  var loaded = 0
  var loaderr = 0 // 加载失败的图片个数
  arr = ($.isArray(arr)) ? arr : [arr]

  for (; i < arr.length; i++) {
    newimages[i] = new Image()
    newimages[i].src = arr[i]
    newimages[i].onload = function() {
      loaded++
      if (loaded === arr.length) {
        dfd.resolve()
      }
    }
    newimages[i].onerror = function() {
      loaded++
      loaderr++

      // 全部加载失败
      if (loaderr === arr.length) {
        dfd.reject()
        return
      }
      if (loaded === arr.length) {
        dfd.resolve()
      }
    }
  }

  return dfd
}

preloadImages(['1.jpg', '2.jpg']).fail(function() {
  $('#div').text('无图片')
})
by.Genesis | 园豆:2719 (老鸟四级) | 2018-01-12 13:28

非常非常感谢,居然给了代码,搞不好你还调试过~好人一生平安。有学到东西,Deferred,待我去了解下,再次感谢。

支持(0) 反对(0) ahdung | 园豆:206 (菜鸟二级) | 2018-01-12 15:52

@ahdung: 代码有点错误

newimages.onerror => newimages[i].onerror

支持(1) 反对(0) by.Genesis | 园豆:2719 (老鸟四级) | 2018-01-12 17:29
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册