判断图片加载完成(js,jquery)代码

 var totalimages = 10;
var loadedimages = 0;
$(“<img/>”).load(function() {
++loadedimages;
if(loadedimages == totalimages)
{//全部图片加载完成时….. } });

js 代码

<script language="网页特效">
//判断浏览器
var browser=new object();
browser.useragent=window.navigator.useragent.tolowercase();
browser.ie=/msie/.test(browser.useragent);
browser.moz=/gecko/.test(browser.useragent);

//判断是否加载完成
function imagess(url,imgid,callback){   
    var val=url;
    var img=new image();
    if(browser.ie){
        img.onreadystatechange =function(){
            if(img.readystate=="complete"||img.readystate=="loaded"){
                callback(img,imgid);
            }
        }       
    }else if(browser.moz){
        img.onload=function(){
            if(img.complete==true){
                callback(img,imgid);
            }
        }       
    }   
    //如果因为网络或图片的原因发生异常,则显示该图片
    img.onerror=function(){img.src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/20100813124227196.gif}
    img.src=val;
}

//显示图片
function checkimg(obj,imgid){
document.getelementbyid(imgid).src=obj.src;
}
//初始化需要显示的图片,并且指定显示的位置
window.onload=function(){
    imagess("yun_qi_img/01cf20088f9506f063d98653.gif","img1",checkimg);
    imagess("yun_qi_img/7b7b19c70d62f4fdd0006050.gif","img2",checkimg);
    imagess("yun_qi_img/892557641806d20eaa184c71.gif","img3",checkimg);
    imagess("yun_qi_img/20071204181216078845_h.jpg","img4",checkimg);
    imagess("http://www.111cn.net/-/res/camilla/20071204181216d078845_h.","img5",checkimg);
}
</script>
<body>
<img id="img1" src="loading.gif" width="100" height="100" />
<img id="img2" src="loading.gif" width="100" height="100" />
<img id="img3" src="loading.gif" width="100" height="100" />
<img id="img4" src="loading.gif" width="100" height="100" />
<img id="img5" src="loading.gif" width="100" height="100" />

</body>
</html>

时间: 2024-08-01 22:05:53

判断图片加载完成(js,jquery)代码的相关文章

js判断图片加载完成后获取图片实际宽高的方法_javascript技巧

本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q

jquery 判断图片加载完毕例子

complete判断图片是否加载了 感谢谷歌,找到了好使的方法,简单用法就是:  代码如下 复制代码 qim=new Image();//新建一个图片: qim.src=$preload;//图片地址是你准备要加载的地址: if(qim.complete){ $("#cxNfloor").html($filetoload);//qim.complete表示这个图片是否加载完毕了 } 后来又发现一个方法  代码如下 复制代码 $("").load(function()

jquery动态加载外部js文件代码研究

$.getScript函数动态加载js 有时网页上的js过多就会让网页加载太慢,用户体验不好,我们可以使用jquery $.getScript函数动态加载我们需要的js文件    代码如下 复制代码 $("#load").click(function(){  $.getScript('helloworld.js', function() {     $("#content").html('Javascript is loaded successful!');  })

模拟jQuery中的ready方法及实现按需加载css,js实例代码_jquery

一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合了一些书籍内容,总结一下.先说一下ready函数的实现思路:变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个浏览器的事件绑定处理函数,并为isReady赋值(根据事件异步处理程序来确定),然后返回一个传参闭包,在闭包中,主要判断isReady值来执行操作,如果dom

拉动滚动条加载数据的jquery代码_jquery

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>拉动滚动条加载数据</title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> &l

jQuery实现图片加载完成后改变图片大小的方法_jquery

本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <

jQuery图片加载显示loading效果_jquery

在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图: 最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替. 页面引用 <div class="container"> <div class="row block" id="img-list"> <div class="col-md-3"> <img src="/Assets/On

JavaScript前端图片加载管理器imagepool使用详解_基础知识

前言       imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数.       对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片url" />.       经过不断优化,出现了图片延迟加载方案,这回图片的URL不直接写在src属性中,而是写在某个属性中,比如:<img src="" data-src="图片url" />.这样浏览器就不会自动

JavaScript imagepool图片加载管理器使用教程

前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片url" />. 经过不断优化,出现了图片延迟加载方案,这回图片的URL不直接写在src属性中,而是写在某个属性中,比如:<img src="" data-src="图片url" />.这样浏览器就不会自动加载图片,等到一个恰当的时机需要加载