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 ){
              //全部加载完成
           }
        }
     }
  • 相关阅读:
    JAVA线程池
    数据库三范式和反三范式
    nvm切换node的版本
    vue源码解析一
    css实现气泡样式
    openlayer 地图实现圈选框选清楚 选择地图区域
    vs code开发常用插件
    记录几个好用的工具
    03 使用css改变页面样式
    02 常用的html元素
  • 原文地址:https://www.cnblogs.com/chaser-li/p/8266842.html
Copyright © 2011-2022 走看看