利用图片没有加载完成的时候，宽高为0。我们很容易判断图片的一个加载情况。如下：
思路:判断图片高度 --> 存在高度等于0 --> 定时500毫秒再次扫描 --> 直到全部不等于0 -->进行下一步处理
注意:引入jquery.js
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>load event</title>

 <script language="javascript" src="jquery.js"></script>

 </head>

 <body>

 <img src="http://home.baidu.com/resource/r/home/img/logo-yy.gif" alt="" class='cover'/>

 </body>

 <script>

 var t_img; // 定时器

 var isLoad = true; // 控制变量

 // 判断图片加载状况，加载完成后回调

 isImgLoad(function(){

 // 加载完成

 //document.write('图片加载完成!');

 alert('图片加载完成');

 });

 // 判断图片加载的函数

 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毫秒就扫描一次，可以自己调整

 }

 }

 </script>

 </html>
需要注意的是,该方法不能判断图片是否存在.即使图片不存在,img在请求完成后,会有一个不为0的宽高.

jquery判断图片是否加载完毕的更多相关文章

  1. javaScript & jquery完美判断图片是否加载完毕

    好久没写东西了,正好最近因为工作需要,写了一个瀑布流异步加载的程序. 今天就不谈瀑布流,来谈一下关于load的问题. ----------------------------------------- ...

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

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

  3. jQuery load() 判断 iframe 是否加载完毕

    判断 iframe 是否加载完毕  方法.jQuery load() var frm = document.getElementById('myiframe'); $(frm).load(functi ...

  4. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

  5. JavaScript判断图片是否加载完成的三种方式

    JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...

  6. Js判断CSS文件加载完毕的实例教程

    要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...

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

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

  8. 【转】JS判断SWF,JPG加载完毕、兼容（Activex,plugIn）所有浏览器

    JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...

  9. 使用jQuery实现图片懒加载原理

    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...

随机推荐

  1. adb server didn t ack failed to start daemon

    关掉Ecilpse,打开cmd命令行 1)cd到sdk的platform-tools目录下, 2)执行  adb kill-server  ,出现  server not runing 提示 3)执行 ...

  2. 【IOS学习基础】NSObject.h学习

    一.<NSObject>协议和代理模式 1.在NSObject.h头文件中,我们可以看到 // NSObject类是默认遵守<NSObject>协议的 @interface N ...

  3. c语常用算法库(1)

    1,冒泡排序 #include <iostream> using namespace std; int main(){ ]; // 一共n个数, n不超过1000. a用来保存这些数. , ...

  4. XML_PULL解析

    一.在Android应用中的XML文件来源 1.本地xml文件     本地XML文件可以放在应用根目录assets文件夹.res/xml.res/raw.SDcard卡.应用的data目录等: 除r ...

  5. sql server 2008 索引

    微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引.簇集索引)和非聚集索引(nonclustered index,也称非聚类索引.非簇集索引) 我们举例来 ...

  6. c/c++与java------之JNI学习（一）

    一.java 调用c/c++ 步骤: 1.在java类中创建一个native关键字声明的函数 2.使用javah生成对应的.h文件 3.在c/c++中实现对应的方法 4.使用vs2012创建一个win ...

  7. Javascript 之内置对象

    JS提供了11种引用类型:Object.Array.Date.Function.Error.RegExp.Math.Number.String.Boolean.Globle.其中包括了三种基本包装类型 ...

  8. eclipse中调出android sdk manager和android virtual device manager图标

    有时候在安装ADT插件后,eclipse菜单栏上不会显示android sdk manager和android virtual device manager两个图标, 这个时候,如果安装ADT插件的步 ...

  9. 博士论文》》》 Journal,magazine,transaction,proceeding

    Journal期刊:刊登关于某特殊主题的文章的期刊 magazine杂志:综合性内容的期刊 transactions(学会等的)议事录,会报,会刊 proceedings记录, 会议录; 年[学]报; ...

  10. JavaScript实现定点圆周运动

    目是这样的:假设有一定点(400px,300px),通过JavaScript使一个直径20px的圆点以 r=180px 为半径围绕该点做匀速圆周运动. 这个问题的整体实现思想应该是这样的,看到“半径” ...