新会员白菜网送体验金前端开发
新会员白菜网送体验金用户体验

JS判断单、多张图片加载完成

在实际的运用中有这样一种场景,某资源加载完成后再执行某个操作,例如在做导出时,后端通过打开模板页生成PDF,并返回下载地址。这时前后端通常需要约定一个flag,用以标识模板准备就绪,可以生成PDF了。

试想,如果模板中有图片,此时如何判断图片是否加载完成?

在此之前来了解一下jquery的ready与window.onload的区别,ready只是dom结构加载完毕,便视为加载完成。(此时图片没有加载完毕),onload是指dom的生成和资源完全加载(比如flash、图片)出来后才执行。接下来回到正题,先从单张图片说起。

(1)、单张图片(图片在文档中)

// HTML
<img id='xiu' src="wp-content/uploads/2014/11/hs-xiu.jpg">  

//js
 $(document).ready(function(){

    //jquery
    $('#xiu').load(function(){
       // 加载完成 
    });

   //原生  onload
    var xiu = document.getElementById('xiu')
    xiu.onload = xiu.onreadystatechange = function(){
       if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
           // 加载完成 
       }
    };

})

注:
1、IE8及以下版本不支持onload事件,但支持onreadystatechange事件;
2、readyState是onreadystatechange事件的一个状态,值为loaded或complete的时候,表示已经加载完毕。
3、以下内容省略兼容

(2)、单张图片(图片动态生成)

//js
 var xiu = new Image()
 xiu.src = 'wp-content/uploads/2014/11/hs-xiu.jpg'
 xiu.onload = function(){
    // 加载完成 
 }

(3)、单张图片(结合ES6 Promise)

//js
 new Promise((resolve, reject)=>{
    let xiu = new Image()
    xiu.src = 'wp-content/uploads/2014/11/hs-xiu.jpg'
    xiu.onload = function(){
       // 加载完成 
       resolve(xiu)
    }
 }).then((xiu)=>{
 //code
 })

(4)、多张图片

var img = [],  
    flag = 0, 
    mulitImg = [
    'wp-content/uploads/2017/03/IMG_0119.jpg',
    'wp-content/uploads/2017/01/1.jpg',
    'wp-content/uploads/2015/11/jquery.jpg',
    'wp-content/uploads/2015/10/maid.jpg'
 ];
 var imgTotal = mulitImg.length;
 for(var i = 0 ; i < imgTotal ; i++){
    img[i] = new Image()
    img[i].src = mulitImg[i]
    img[i].onload = function(){
       //第i张图片加载完成
       flag++
       if( flag == imgTotal ){
          //全部加载完成
       }
    }
 }

(5)、多张图片(结合ES6 Promise.all())

  let mulitImg = [
     'wp-content/uploads/2017/03/IMG_0119.jpg',
     'wp-content/uploads/2017/01/1.jpg',
     'wp-content/uploads/2015/11/jquery.jpg',
     'wp-content/uploads/2015/10/maid.jpg'
 ];
 let promiseAll = [], img = [], imgTotal = mulitImg.length;
 for(let i = 0 ; i < imgTotal ; i++){
     promiseAll[i] = new Promise((resolve, reject)=>{
         img[i] = new Image()
         img[i].src = mulitImg[i]
         img[i].onload = function(){
              //第i张加载完成
              resolve(img[i])
         }
     })
 }
 Promise.all(promiseAll).then((img)=>{
     //全部加载完成
 })
注册就送10元(233)
未经允许不得转载:大前端 » JS判断单、多张图片加载完成
分享到: 更多 (0)

评论 65

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #64

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  2. #63

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  3. #62

    Nice post! Thank you.

  4. #61

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

  5. #60

    Keep up the good work! Thanks.

  6. #59

    Looks realy great! Thanks for the post.

  7. #58

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  8. #57

    Looks realy great! Thanks for the post.

  9. #56

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Jeugdpuistjes1周前 (04-17)回复
  10. #55

    Looks realy great! Thanks for the post.

  11. #54

    Enjoyed the post.

    Huidinstituut1周前 (04-17)回复
  12. #53

    Keep up the good work! Thanks.

    Melasma1周前 (04-17)回复
  13. #52

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Acne behandeling1周前 (04-16)回复
  14. #51

    Keep up the good work! Thanks.

    Ontstekingen1周前 (04-16)回复
  15. #50

    Thanks for this nice post. …

  16. #49

    Enjoyed the post.

    Hyperpigmentatie1周前 (04-16)回复
  17. #48

    Thanks for this nice post. …

    floaten1周前 (04-16)回复
  18. #47

    Thanks for this nice post. …

  19. #46

    Keep up the good work! Thanks.

    Puistjes1周前 (04-15)回复
  20. #45

    Looks realy great! Thanks for the post.

    Rocasea1周前 (04-15)回复
  21. #44

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  22. #43

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Couperose1周前 (04-15)回复
  23. #42

    Looks realy great! Thanks for the post.

    mkb2周前 (04-12)回复
  24. #41

    Looks realy great! Thanks for the post.

  25. #40

    Keep up the good work! Thanks.

  26. #39

    Nice post. I learn something new and challenging on blogs I stumbleupon everyday. It will always be interesting to read through content from other writers and practice something from other sites.

  27. #38

    I was just having a conversation over this I am glad I came across this it cleared some of the questions I had.

  28. #37

    Hello, i think that i saw you visited my blog thus i came to “return the favor”.I’m trying to find things to enhance my site!I suppose its ok to use a few of your ideas!!

    Mikel Arzo1个月前 (03-11)回复
  29. #36

    如果图片加载失败404,是执行img.onerror(),而不执行img.onload(),那么flag == imgTotal 就不会相等了

    onion3个月前 (01-18)回复
  30. #35

    nb

    solfKwolf9个月前 (07-25)回复
  31. #34

    0.svafv

    hh10个月前 (07-07)回复
  32. #33

    onload事件绑定应该再src赋值前

    18111年前 (2018-02-12)回复
  33. #32

    一起学习前端交流的html5技术交流群 250777811 群文件上传了很多的项目实战,大家可以练练手

    web前端2年前 (2017-08-24)回复
  34. #31

    不错

    web前端2年前 (2017-08-24)回复
  35. #30

    留言看看

    审美2年前 (2017-08-23)回复
  36. #29

    隨便留言嗎?

    wase2年前 (2017-08-11)回复
  37. #28

    多张页面结合网站统计

    wase2年前 (2017-08-10)回复
  38. #27

    艳照门图片,日本片直接访问 lanvbo.com/xinggan/index.html

    123212年前 (2017-07-19)回复
  39. #26

    daanjia.com lanvbo.com

    742年前 (2017-07-17)回复
  40. #25

    11111

    21212年前 (2017-07-16)回复
  41. #24

    daanjia.com lanvbo.com

    9452年前 (2017-07-16)回复
  42. #23

    答案家 daanjia.com 美女图片 lanvbo.com

    112年前 (2017-07-16)回复
  43. #22

    lanvbo.com

    112年前 (2017-07-16)回复
  44. #21

    www .lanvbo.com

    112年前 (2017-07-16)回复
  45. #20

    www

    112年前 (2017-07-16)回复
  46. #19

    aaaaaaaaaa222

    112年前 (2017-07-16)回复
  47. #18

    aaaaaaaaaa

    112年前 (2017-07-16)回复
  48. #17

    不错

    hi my2年前 (2017-07-16)回复
  49. #16

    辣女啵

    112年前 (2017-07-11)回复
  50. #15

    11111

    112年前 (2017-07-11)回复
  51. #14

    测试头像

    2132年前 (2017-07-01)回复
  52. #13

    发的杀

    2132年前 (2017-07-01)回复
  53. #12

    haha

    2年前 (2017-06-29)回复
  54. #11

    深圳前端技术高级群622293272

    jjgaga2年前 (2017-06-27)回复
  55. #10

    头像好慢啊

    cuihaifeng2年前 (2017-06-07)回复
  56. #9

    测试评论

    测试2年前 (2017-06-06)回复
  57. #8

    不错。我的新主题,刚好用得上~

    自然志2年前 (2017-05-30)回复
  58. #7

    aa

    2年前 (2017-05-28)回复
  59. #6

    呵呵

    2年前 (2017-05-27)回复
  60. #5

    12345678

    ttt2年前 (2017-05-08)回复
  61. #4

    这么牛逼的文章,【请原谅菜鸟这样说】,我居然是第3720人读的,以后要争取第一个人,读这些牛叉的文章【本宝宝暂时用不到】,我相信,以后会有机会用到的

    点不小2年前 (2017-05-03)回复
  62. #3

    文章很注册就送10元,邀请来深圳前端高级群,只接收有经验和前端技术爱好者,纯粹研究技术,群号622293272

    dolio2年前 (2017-04-27)回复
  63. #2

    第4个 loaded 会报错呢,未定义

    2年前 (2017-04-13)回复
  64. #1

    1

    11213@qq.com2年前 (2017-04-11)回复
    • 哈哈

      2年前 (2017-05-27)回复

themebetter 国内更好的WordPress主题服务商

立即前往
博聚网