zoukankan      html  css  js  c++  java
  • js 判断图片加载完成

    // HTML
    <img id='xiu' src="http://www.daqianduan.com/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的时候,表示已经加载完毕。

    多张图片

    var img = [],  
        flag = 0, 
        mulitImg = [
        'http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg',
        'http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg',
        'http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg',
        'http://www.daqianduan.com/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 ){
              //全部加载完成
           }
        }
     }
  • 相关阅读:
    体验cygwin纪实
    播布客视频PIT专用播放器MBOO2015
    rpm基本命令参考
    rhel7.x配置本地yum
    mtr网络连通性测试
    Oracle下载汇聚
    Spring Cloud心跳监测
    Hystrix的用法
    Redis系列十:缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级
    dubbo异步调用三种方式
  • 原文地址:https://www.cnblogs.com/chaser-li/p/8266842.html
Copyright © 2011-2022 走看看