JavaScript & jQuery完美判断图片是否加载完毕

众所周知，常见瀑布流当鼠标滚动到浏览器底部的时候，就会发起一个ajax的请求。在服务端生成item列表后，通过 js append到相应的div里边。

看起来很简单的样子，关键问题就出在图片的加载问题上，图片一般都放在服务器上，通过http下载到客户端。

例如我的图片地址：

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(){
 // 加载完成
});

好像很强大的样子，其实不然，他的缺点是每加载一张图片，回调函数就执行一次。好吧太烦了，我只想全部加载完走一次就可以了。当然可以，你可以进行修改如下：

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

看了我的代码，你是否也有了自己的想法呢？

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • Javascript 判断Flash是否加载完成的代码

    先定义进度条显示层: 复制代码 代码如下: <div><span class="intro">下载进度:</span> <div class="barborder"> <div class="bar" id="loadpercent"></div> </div> </div> 定义广告层: 复制代码 代码如下: <div id

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

    做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理,js处理图片主要是利用js中Image对象,通过 onload 事件和 onreadystatechange 来进行判断. (1)第一中方法,通过onload事件,比如: 复制代码 代码如下: <script type="text/javascript">var obj=n

  • jQuery 判断图片是否加载完成方法汇总

    对于图片的处理,例如幻灯片播放.缩放等,都是依赖于在所有图片完成之后再进行操作. 今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用 loading 的 gif 图表示正在加载中. 一.普通方法 监听 img 的 load 方法,每 load 一张图片比较一次.关键代码如下: var num = $img.length; $imgs.load(function() { num--; if (num > 0) { return; } console.log('load compelet

  • JQuery判断子iframe何时加载完成解决方案

    项目中遇到场景:一个按钮要在子iframe加载完成之后才能被点击,这是就需要知道iframe何时加载完成,用JQuery很简单就能实现,代码如下: 复制代码 代码如下: var isOnLoad = true; youIFrame.attr("src", url); youIFrame.load(function() { isOnLoad = false;// 加载完成 alert('load success'); }); 已验证通过!

  • js下判断 iframe 是否加载完成的完美方法

    采用的方法很类似: 复制代码 代码如下: var iframe = document.createElement("iframe"); iframe.src = "http://www.jb51.net"; if (!/*@cc_on!@*/0) { //if not IE iframe.onload = function(){ alert("Local iframe is now loaded."); }; } else { iframe.on

  • jQuery中借助deferred来请求及判断AJAX加载的实例讲解

    ajax请求异步队列加载 我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况.ajax默认使用异步加载(async:true).为什么不使用同步呢,因为ajax同步加载会UI渲染线程阻塞的问题.通常表现为在加载大量数据时由于加载时间过长导致页面不能点击.gif动画卡死以及浏览器崩溃等问题.所以,一般情况下,尽量使用ajax异步加载. 可是,我们有些时候的需求要求ajax同步加载,一个加载完再加载下一个,即所谓的队列.前面我们有说过,同步加载会引起UI渲染阻塞问题.那么我们要怎么实

  • 用js判断页面是否加载完成实现代码

    用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == "complete"判断是否加载完成 代码如下: 复制代码 代码如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() { if(document.readyState == "complete") //当页

  • 检测jQuery.js是否已加载的判断代码

    当然,该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方法: 方法1: 复制代码 代码如下: if (jQuery) { // jQuery 已加载 } else { // jQuery 未加载 } 方法2: 复制代码 代码如下: if (typeof jQuery == 'undefined') { // jQuery 未加载 } else {

  • js或者jquery判断图片是否加载完成实现代码

    网页中有时候需要获得图片的宽度和高度,来定义某些大小,可是这个是需要从服务端请求图片,下载到本地才能够得到的,有些js或者jquery代码在还没有加载完图片时就执行了.怎么办呢? jquery提供一个方法: 复制代码 代码如下: 01.$("").load(function(){...}); 其中选择器是图片的id或class,function里面的方法就是回调函数,在图片加载完成后执行,但是我试验了很多,压根儿不是那么回事,正确的解决方法是: 用js的onload方法: 复制代码 代

  • JavaScript & jQuery完美判断图片是否加载完毕

    众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求.在服务端生成item列表后,通过 js append到相应的div里边. 看起来很简单的样子,关键问题就出在图片的加载问题上,图片一般都放在服务器上,通过http下载到客户端. 例如我的图片地址: http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg 而图片下载到本地是需要一定时间的(网速快的路过).当图片还没有下载完的时候,使用js获取到元素的宽高将会是0. 有的同学说了我

  • javascript判断图片是否加载完成的方法推荐

    load事件 <script type="text/javascript"> $('img').onload = function() { //code } </script> 优点:简单易用,不影响HTML代码. 缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方 jquery方法 <script type="text/javascript"> $(function(){ $('.pic1').each(fun

  • 如何基于JavaScript判断图片是否加载完成

    这篇文章主要介绍了如何基于JavaScript判断图片是否加载完成,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 这里我用了一个tag来判断显示哪个样式,但是tag是写在了setTimeOut里面的,是一个延时函数,异步的操作.延时300ms的目的就是为了等待图片加载出来,但是当网络慢的时候是满足不了的.网络慢图片没有加载出来300ms之后就会直接走入false,会提示用户重新获取图片,但其实图片已经返回回来了. 所以这样的做法是很不灵活的.

  • 使用JavaScript判断图片是否加载完成的三种实现方式

    使用JavaScript判断图片是否加载完成的三种实现方式

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src=&

  • JavaScript怎么判断图片是否加载完成以便获取其尺寸

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以,求方法? 一.load事件 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src="http:/

  • JS判断图片是否加载完成方法汇总(最新版)

    JS判断图片是否加载完成方法汇总(最新版)

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧. 一.load事件 <script type="text/javascript"> $('img').onload = function() { //code } </script> 优点:简单易用,不影响HTML代码. 缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方 二.jquery方法 <script

  • js 判断图片是否加载完以及实现图片的预下载

    创建一个Image对象,实现图片的预下载,如果图片已经存在于浏览器缓存,直接调用回调函数,使用onload事件可以判断图片是否加载完成 function loadImage(url, callback) { var img = new Image(); //创建一个Image对象,实现图片的预下载 img.src = url; if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 callback.call(img); return; // 直接返回,不用再

  • JS实现判断图片是否加载完成的方法分析

    本文实例讲述了JS实现判断图片是否加载完成的方法.分享给大家供大家参考,具体如下: 1.onload事件 <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <img src="images/background.png"> <p>loading...</p> <script type=&qu

  • javascript瀑布流式图片懒加载实例解析与优化

    之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒加载实例>再来看看图片"懒加载"的一些知识. 图片"懒加载"的主旨: 按照需要加载图片,也就是说需要显示的时候再加载图片显示,减少一次性加载的网络带宽开销. 先来看一段代码: var conf = { 'loadfirst': true, 'loadimg': t

随机推荐