<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin:;padding:;}
    .main{width:800px;margin:50px auto;border:1px solid #ccc;}
    .main li{%;}
    .main ul{overflow:hidden;}
    .main li img{width:%;}
    li{list-style: none;}
  </style>
  <script src="src.js"></script>
</head>
<body>
    <div class="main">
      <ul>
        <li>
            <img  src="https://img13.360buyimg.com/mobilecms/s80x80_jfs/t3607/53/1645824653/56317/14fbe587/582eb3d7N41fdab12.jpg!q90.webp" onload="imgObj('https://img14.360buyimg.com/n4/s130x130_jfs/t3358/84/1745747532/247590/ebbfc20e/58340651N16910ec9.jpg!q90.webp')">
        </li>
      </ul>
    </div>
</body>
</html>
function imgObj(src){
    var _src = src+'?datetime='+new Date().getTime();

    /**
     * 加载图片，直到加载完成后才调用回调函数
     * @param url 后面读取图片流的url
     * @param callback 回调函数
     */
    function loadImage(url, callback) {
        var  img = new Image();
        img.src = url;
         var timer = setInterval(function() {
             if (img.complete) {
                 callback(img);
                 clearInterval(timer);
             }
         }, );
    }
    /**
    *图片加载完成
    */
    function testFun(_ele){
         console.log('into testFun');
    }
    loadImage(_src,testFun);
}

js判断图片是否加载成功的更多相关文章

  1. JS判断图片是否加载完成三种方式

    1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...

  2. js 判断图片是否加载完成(使用 onload 事件)

    我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload onload 与 ready 的区别是: 1.ready 是 DOM 加载完成的事 ...

  3. js判断图片是否加载完毕

    附件: https://www.jb51.net/article/102385.htm 问题:  .offset().top和$(window).scrollTop()每次刷新页面后滚动的值有时候会不 ...

  4. js判断图片是否加载完成

    var img = new Image(); //新建一个图片对象:img.src = ...; //图片地址是你准备要加载的地址:if(img.complete){ //表示图片已经加载完成}

  5. 关于JS判断图片是否加载完成且获取图片宽度的方法

    做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处 ...

  6. js 判断图片是否加载完成

    1.根据url来加载图片: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /**  * 加载图片,直到加载完成后才调用回调函数  * @param url 后面读取图片流的u ...

  7. JS判断图片是否加载完成 背景图404 快到碗里来

    面对这个问题 我最多做到表面笑嘻嘻 …… 真不知道测试怎么那么…… 啥都能给你测出来 有的没的都能给你测出来 算了算了  谁让本仙女本精灵本可爱温柔大方善解人意呢 …呵呵呵 ————————————正 ...

  8. 判断img图片是否加载成功

    上班之余,记录一下工作中遇到的有趣问题... 事情是这样的...在做一个内嵌H5的app时,有一个“个人名片”页面...要求:如果后台接口有给头像的图片链接就用他们给的,如果没给,前端给个默认头像.. ...

  9. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

随机推荐

  1. uva147 Dollars ——完全背包

    link:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  2. Linux设计准则

     计算机体系结构: 运算器 控制器 存储器,内存,编址 输出设备 输入设备 Linux内核功能: 进程管理内存管理文件系统网络功能硬件驱动安全机制 Linux的基本原则: 1.由目的单一的小程序组成: ...

  3. Git的配置及常用命令

    Git配置 git config --global user.name "<username>" git config --global user.email &quo ...

  4. OrmLite数据库的使用方法

    第一步:导入架包     1.将orm的两个支持包放入project视图下的你的工程的lib目录里(这两个JAR包网上都有,GitHub上最新)     2.添加依赖:在file文件目录下的proje ...

  5. [Spring MVC] - Annotation验证

    使用Spring MVC的Annotation验证可以直接对view model的简单数据验证,注意,这里是简单的,如果model的数据验证需要有一些比较复杂的业务逻辑性在里头,只是使用annotat ...

  6. 【Python与机器学习】：利用Keras进行多类分类

    多类分类问题本质上可以分解为多个二分类问题,而解决二分类问题的方法有很多.这里我们利用Keras机器学习框架中的ANN(artificial neural network)来解决多分类问题.这里我们采 ...

  7. git初始化

    git init:初始化 git status:查看当前目录下文件状态 git add -A(表示添加当前目录下所有文件)/文件名(表示只添加该一个文件) git commit -m '':提交到本地 ...

  8. RNG vs EDG | SKT vs KTB [20160826]

    G1 RNG:丽桑卓,古拉加斯,强行开团流. EDG:崔斯特,普朗克,伊莉斯游走,全球支援流,小规模团战能以多打少. G2 RNG:塔莉垭,纳尔,烬. EDG:雷克塞,艾克,劫,冲击后排. G3 RN ...

  9. 6.3Sum && 4Sum [ && K sum ] && 3Sum Closest

    3Sum Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find a ...

  10. JAVA设计模式之解释器模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述解释器(Interpreter)模式的: 解释器模式是类的行为模式.给定一个语言之后,解释器模式可以定义出其文法的一种表示,并同时提供一个 ...