zoukankan      html  css  js  c++  java
  • javascrip笔记——图片加载

    var t_img; // 定时器
    var isLoad = true; // 控制变量
    
    // 判断图片加载状况,加载完成后回调
    isImgLoad(function(){
    // 加载完成
    });
    
    // 判断图片加载的函数
    function isImgLoad(callback){
    // 注意我的图片类名都是cover,因为我只需要处理cover。其它图片可以不管。
    // 查找所有封面图,迭代处理
    $('.cover').each(function(){
    // 找到为0就将isLoad设为false,并退出each
    if(this.height === 0){
    isLoad = false;
    return false;
    }
    });
    // 为true,没有发现为0的。加载完毕
    if(isLoad){
    clearTimeout(t_img); // 清除定时器
    // 回调函数
    callback();
    // 为false,因为找到了没有加载完成的图,将调用定时器递归
    }else{
    isLoad = true;
    t_img = setTimeout(function(){
    isImgLoad(callback); // 递归扫描
    },500); // 我这里设置的是500毫秒就扫描一次,可以自己调整
    }
    }
    
     
    
    function loadImage(url, callback) {
    var img = new Image(); //创建一个Image对象,实现图片的预下载
    img.src = url;
    
    if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
    callback.call(img);
    return; // 直接返回,不用再处理onload事件
    }
    img.onload = function () { //图片下载完毕时异步调用callback函数。
    callback.call(img);//将回调函数的this替换为Image对象
    };
    };
    

      

  • 相关阅读:
    HTML中Css补充资料
    HTML表单
    HTML盒子模型
    标准文档流
    什么使用面向对象
    static修饰
    static修饰
    列表样式
    java基础(9)
    java基础(8)
  • 原文地址:https://www.cnblogs.com/MonaSong/p/5151874.html
Copyright © 2011-2022 走看看