js判断图片是否加载完毕
附件:
https://www.jb51.net/article/102385.htm
问题:


//图片加载完毕再执行
var t_img; // 定时器
var isLoad = true; // 控制变量
// 判断图片加载状况,加载完成后回调
isImgLoad(function(){
// 加载完成
if ($(".J_testFixedShow").length && $(".J_hideTestFixedBtn").length) {
var h = $(".J_hideTestFixedBtn").offset().top + 150;
var topShow = $(".J_testFixedShow").offset().top;
var topNum = $(".J_testFixedTop").length > 0 ? ($(".J_testFixedTop").offset().top - 20) : 200;
var testBtn = $("#testFixedBtn");
$(window).scroll(function() {
var wt = $(window).scrollTop();
if (wt > topShow && wt < h) {
$('#testFixedBtn').show();
$('.public_footer_servers').css('padding-bottom', '50px')
} else {
$('#testFixedBtn').hide();
$('.public_footer_servers').css('padding-bottom', '20px')
}
});
testBtn.on('click', function() { $('html,body').scrollTop(topNum) })
}
});
// 判断图片加载的函数
function isImgLoad(callback){
// 查找所有图,迭代处理
$('img').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毫秒就扫描一次,可以自己调整
}
}
在脚本之家看到一篇文章:
例如我的图片地址:
http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg
而图片下载到本地是需要一定时间的(网速快的路过)。当图片还没有下载完的时候,使用js获取到元素的宽高将会是0。
有的同学说了我使用jquery的ready不就好了。如下:
$(document).ready(function(){
// 在这里写你的代码...
});
如果这么简单就好了,我这里就说下ready与window.onload的区别。
jquery的ready只是dom的结构加载完毕,便视为加载完成。(缺点是图片没有加载完毕,宽高为0,程序出错)
js的window.onload是指dom的生成和资源的加载,比如flash、图片完全加载出来后才执行onload。(缺点就是当某一张图片很大的时候,岂不阻止了其它js的正常执行)
知道了他们的区别后,我们再来谈谈如何避免错误和选择性使用。
如果你进行了百度,很多人会告诉你。
这样:
$('img').load(function(){
// 加载完成
});
好像很强大的样子,其实不然,他的缺点是每加载一张图片,回调函数就执行一次。好吧太烦了,我只想全部加载完走一次就可以了。当然可以,你可以进行修改如下:
var imgNum=$('img').length;
$('img').load(function(){
if(imgNum){
// 加载完成
}
});
这样总可以了吧,我加载一张,就用图片总数去减一,减到0我就加载完毕。看起来很完美,前提是你没遇到IE。
IE的图片总是从缓存文件里去拿,这就造成load方法根本就不执行,只有是新图片才会走load。
服了吧?继续往下看。
或者是这样:
document.getElementById('img').onload=function(){
// 加载完成
};
看我原生代码一统天下,实际上效果甚微,一次只能处理一个你准备写多少个document,有人说我可以用循环去绑定,经过我测试貌似根本没效果。
还是一笑而过吧。看看我的最终解决方案(兼容:谷歌&火狐&IE)
利用图片没有加载完成的时候,宽高为0。我们很容易判断图片的一个加载情况。如下:
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毫秒就扫描一次,可以自己调整
}
}
原链接:https://www.jb51.net/article/102385.htm
js判断图片是否加载完毕的更多相关文章
- 【转】JS判断SWF,JPG加载完毕、兼容(Activex,plugIn)所有浏览器
JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...
- js 判断iframe是否加载完毕
js 判断iframe是否加载完毕 CreationTime--2018年9月13日15点30分 Author:Marydon 1.javascript实现 window.onload = fun ...
- Js判断CSS文件加载完毕的实例教程
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...
- JS判断图片是否加载完成三种方式
1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...
- js 判断图片是否加载完成(使用 onload 事件)
我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload onload 与 ready 的区别是: 1.ready 是 DOM 加载完成的事 ...
- js判断网页是否加载完毕 包括图片
<script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...
- javaScript & jquery完美判断图片是否加载完毕
好久没写东西了,正好最近因为工作需要,写了一个瀑布流异步加载的程序. 今天就不谈瀑布流,来谈一下关于load的问题. ----------------------------------------- ...
- jquery判断图片是否加载完毕
来源: <http://www.2cto.com/kf/201409/331234.html> 利用图片没有加载完成的时候,宽高为0.我们很容易判断图片的一个加载情况.如下: 思路:判断图 ...
- 用js判断页面是否加载完毕
用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == "complete"判断是否加载完成 docum ...
随机推荐
- Spring框架的事务管理的分类
1. Spring的事务管理的分类 1. Spring的编程式事务管理(不推荐使用) * 通过手动编写代码的方式完成事务的管理(不推荐) 2. Spring的声明式事务管理(底层采用AOP的技术) * ...
- tcl&redis安装
http://www.linuxfromscratch.org/blfs/view/cvs/general/tcl.html tcl http://redis.io/topics/quickstart
- [freeCodeCamp] solution to JUGGLING ASYNC
Here's the official solution in case you want to compare notes: var http = require('http') var bl = ...
- window.location.origin
当前页面的域名+端口号 var HTTP_REMOTE = (function () { var origin = window.location.origin; if (origin.match(/ ...
- 【Sikuli】Sikuli 文档
http://sikulix-2014.readthedocs.io/en/latest/index.html
- mysq 日期l查询
pym=mysql(host = '#', port = 3306, user = '#',passworld='#',database='#') #根据起始和结束时间 charge_sql = 'S ...
- 2017年值得一看的7个APP设计
新媒体时代蓬勃发展,各类APP如雨后春笋般出现.下载到合适的APP,不仅衣食住行一键搞定,甚至健身.社交.阅读等需求也能足不出户地满足.对于广大“吃瓜群众”来说,选择APP是个人需求以及跟随潮流的选择 ...
- W-D-S-UART编程
1.协议原理 2.原理框图 3.开发板底板与核心板图 4.开始配置寄存器 a).使相应I/O引脚配置为UART引脚 b).配置数据发送模式 c).设置为中断或查询模式 d).使能串口缓存 e).流量控 ...
- 原生js:click和onclick本质的区别
原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的 ...
- 2018.09.11 loj#10216.五指山(exgcd)
传送门 就是一个exgcd的板子. 但注意算距离差的时候是在一个环上面算. 还有,答案要开long long233... 注意这两点之后就是exgcd板子了. 代码: #include<bits ...