UDN-企业互联网技术人气社区

板块导航

浏览  : 1392
回复  : 10

[原生js] JS判断单、多张图片加载完成

[复制链接]
bobby的头像 楼主
发表于 2018-7-13 16:40:34 | 显示全部楼层 |阅读模式
本帖最后由 bobby 于 2018-7-13 16:42 编辑


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

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

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

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

  1. // HTML
  2. <img id='xiu' src="http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg">  

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

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

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

  16. })
复制代码

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

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

  1. //js
  2. var xiu = new Image()
  3. xiu.src = 'http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg'
  4. xiu.onload = function(){
  5.     // 加载完成
  6. }
复制代码

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


  1. //js
  2. new Promise((resolve, reject)=>{
  3.     let xiu = new Image()
  4.     xiu.src = 'http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg'
  5.     xiu.onload = function(){
  6.        // 加载完成
  7.        resolve(xiu)
  8.     }
  9. }).then((xiu)=>{
  10. //code
  11. })
复制代码

(4)、多张图片

  1. var img = [],  
  2.     flag = 0,
  3.     mulitImg = [
  4.     'http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg',
  5.     'http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg',
  6.     'http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg',
  7.     'http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg'
  8. ];
  9. var imgTotal = mulitImg.length;
  10. for(var i = 0 ; i < imgTotal ; i++){
  11.     img[i] = new Image()
  12.     img[i].src = mulitImg[i]
  13.     img[i].onload = function(){
  14.        //第i张图片加载完成
  15.        flag++
  16.        if( flag == imgTotal ){
  17.           //全部加载完成
  18.        }
  19.     }
  20. }
  21. (5)、多张图片(结合ES6 Promise.all())

  22.   let mulitImg = [
  23.      'http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg',
  24.      'http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg',
  25.      'http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg',
  26.      'http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg'
  27. ];
  28. let promiseAll = [], img = [], imgTotal = mulitImg.length;
  29. for(let i = 0 ; i < imgTotal ; i++){
  30.      promiseAll[i] = new Promise((resolve, reject)=>{
  31.          img[i] = new Image()
  32.          img[i].src = mulitImg[i]
  33.          img[i].onload = function(){
  34.               //第i张加载完成
  35.               resolve(img[i])
  36.          }
  37.      })
  38. }
  39. Promise.all(promiseAll).then((img)=>{
  40.      //全部加载完成
  41. })
复制代码

发表于 2018-7-13 16:41:04 | 显示全部楼层
JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。
使用道具 举报

回复

发表于 2018-7-13 16:41:04 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部