登陆 注册

jquery判断图片或者背景图片加载完毕

陈双义 2018-02-24 593人围观 ,发现0个评论 jquery 百度已收录

jquery判断图片或者背景图片加载完毕.jpg

使用JavaScript判断图片加载完毕,如果图片在页面中的某个img标签中的话,可以用下面这个:

  • $('img').on('load', function() {

  • alert('new image loaded: ' + this.src);

  • });

原生js

  • imgNode.onload = () => {

  • alert('new image loaded: ' + this.src);

  • };

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

  • $(document).ready(function(){

  •    //jquery

  •   $('#pic').load(function(){

  •     // 加载完成 

  •   });

  •    //原生  onload

  •     var pic = document.getElementById('pic')

  •     pic.onload = pic.onreadystatechange = function(){

  •        if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){

  •            // 加载完成 

  •        }

  •     };})

注:

1、IE8及以下版本不支持onload事件,但支持onreadystatechange事件;

2、readyState是onreadystatechange事件的一个状态,值为loaded或complete的时候,表示已经加载完毕。

3、如果引入jquery库可以考虑直接使用jquery的load事件来解决兼容问题。·

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

  • //js

  • var pic = new Image()

  • pic.src = 'http://www.chenshuangyi.com/zb_users/theme/zbpNana/image/logo1.png'

  • pic.onload = pic.onreadystatechange = function(){

  • if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){

  • // 加载完成

  • }};

  • //jquery

  • $('<img/>').attr('src', 'http://www.chenshuangyi.com/zb_users/theme/zbpNana/image/logo1.png').on('load', function() {

  • $(this).remove(); // 防止内存泄露

  • //图片加载完毕

  • });

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

  • //code from http://www.chenshuangyi.com//js

  • new Promise((resolve, reject)=>{

  • let pic = new Image()

  •    pic.src = 'http://www.chenshuangyi.com/zb_users/theme/zbpNana/image/logo1.png'

  •    pic.onload = function(){

  •       // 加载完成

  •       resolve(pic)

  •    }

  • }).then((pic)=>{

  • //code

  • })

(4)、多张图片

  • var img = [],  

  •     flag = 0, 

  •     mulitImg = [

  •     'http://caibaojian.com/a/a1.png',

  •     'http://caibaojian.com/a/a2.png',

  •     'http://caibaojian.com/a/a3.png'

  •  ];

  •  var imgTotal = mulitImg.length;

  •  for(var i = 0 ; i < imgTotal ; i++){

  •     img[i] = new Image()

  •     img[i].src = mulitImg[i]

  •     var pic = img[i];

  •     //用jquery

  •     $(pic).on('load',function(){

  •     $(this).remove();

  •     flag++

  •     if(flag==imgTotal){

  •     //全部加载完成

  •     }

  •     })

  •     //原生js

  •     // img[i].onload = img[i].onreadystatechange = function(){

  •     //    if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){

  •     //        //第i张图片加载完成

  •     //        flag++

  •     //        if( flag == imgTotal ){

  •     //           //全部加载完成

  •     //        }

  •     //    }

  •     // };

  •  }

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

  • let mulitImg = [

  •     'http://caibaojian.com/a/a1.png',

  •     'http://caibaojian.com/a/a2.png',

  •     'http://caibaojian.com/a/a3.png'

  •  ];

  •  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)=>{

  •      //全部加载完成

  •  })

如何判断背景图片加载完毕?

  • $('<img/>').attr('src', 'http://www.chenshuangyi.com/zb_users/theme/zbpNana/image/logo1.png').on('load', function() {

  •    $(this).remove(); // prevent memory leaks as @benweet suggested

  •    $('body').css('background-image', 'url(http://www.chenshuangyi.com/zb_users/theme/zbpNana/image/logo1.png)');

  • });

本文标题:jquery判断图片或者背景图片加载完毕
本文链接:http://www.chenshuangyi.com/post/42.html
作者授权:除特别说明外,本文由 陈双义 原创编译并授权 陈双义博客 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。协议见页脚-知识共享许可协议。
谢谢打赏
支付宝 支付宝
微信 微信
请发表您的评论
最新留言
站点信息
  • 文章总数:288
  • 页面总数:9
  • 分类总数:10
  • 标签总数:414
  • 评论总数:123
  • 浏览总数:135198
扫描关注官方微信公众号
官方微信公众号
不容错过