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 ...
随机推荐
- Zookeeper 系列(一)基本概念
Zookeeper 系列(一)基本概念 https://www.cnblogs.com/wuxl360/p/5817471.html 一.分布式协调技术 在给大家介绍 ZooKeeper 之前先来给大 ...
- Maven系列(十)发布自己的项目到 Maven 中央仓库
Maven 发布自己的项目到 Maven 中央仓库 可能很多人都在用 Maven 仓库,但是如果要问怎么发布项目到中央仓库,估计很多人都不知道了,下面本篇文章带大家往中央仓库发布一个自己的 Maven ...
- 用个体软件过程(PSP)记录你的工作
用个体软件过程(PSP)记录你的工作 首先,非常感谢大家对本门课程的学习所投入的时间和精力. 其次,已经进入数据时代,口说无凭,拿数据来.如果你认为你已经投入了大量精力在这门课程的学习和作业中,而且已 ...
- 2018.07.01 洛谷小B的询问(莫队)
P2709 小B的询问 题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数 ...
- RHEL6解决无法使用YUM源问题(转)
RHEL的YUM源需要注册用户才能更新使用,由于CentOS和RHEL基本没有区别,并且CentOS已经被REHL收购.所以将RHEL的YUM源替换为CentOS即可.问题如下:[root@bogon ...
- CentOS yum 源的配置与使用(引用)
http://www.cnblogs.com/mchina/archive/2013/01/04/2842275.html
- cxf-rs client 调用
org.apache.cxf.jaxrs.client.WebClient get调用 @GET @Path("/echo/{input}") @Produces("te ...
- (线段树)Mayor's posters --poj -- 2528
链接: http://poj.org/problem?id=2528 覆盖问题, 要从后往前找, 如果已经被覆盖就不能再覆盖了,否则就可以覆盖 递归呀递归什么时候我才能吃透你 代码: #include ...
- (连通图 模板题 无向图求桥)Critical Links -- UVA -- 796
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- HDU2976 Dropping tests 2017-05-11 18:10 39人阅读 评论(0) 收藏
Dropping tests Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12187 Accepted: 4257 D ...