欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 网站前端 > jquery教程 >

关于img的onload事件兼容ie下的bug问题

来源:未知 ?? 时间:2017-03-23 17:36?作者:xxadmin

[导读] 我 们都知道onload事件是在img加载完成后触发的事件,但是ie下这个onload事件并没有想像中的灵,特别是在ie7/ie6下,网上的解释是ie因为缓存关系造成的 img.onload 事件没有被激发,因为...

我 们都知道onload事件是在img加载完成后触发的事件,但是ie下这个onload事件并没有想像中的灵,特别是在ie7/ie6下,网上的解释是ie因为缓存关系造成的 img.onload 事件没有被激发,因为ie这个东西喜欢异步,所以由缓存的问题,网页获取到图片的时间极短(应该比代码解释的时间快)所以造成了onload事件被错过了。网上一般的说法是把onload事件写在src赋值之前可以解决这个onload事件不被触发的问题,但是,实际上如果对于多图片来说,这个方法其实不太灵。即把下面代码:


var image = new Image();
image.src = "xxx.jpg";
image.onload = function() {
    document.getElementById("img").src = image.src;
}
var image = new Image();
image.onload = function() {
    document.getElementById("img").src = image.src;
}

image.src = "xxx.jpg";

实际证明,这样子改可以改善部分情况,但是不是万试万灵的。特别是在做多图片异步加载时,这个onload事件不被触发的可能性太高了。于是在网上又看了一堆资料,发现image有一个叫 complete 属性,这个属性表示图片是否已经加载完成了,如果加载完成为true,未完成为false,有了这个属性就可以写一个定时检查方法,从而堵上ie的这个bug。以下是我写的一段代码:


obj.find(".proBox > .image > a > img").each(function() {
    /遍历图片,检查是否需要加载图片
    if ($(this).attr("status") == "unload" || $(this).attr("status") == "") { /未加载的图片
        var realSrc = $(this).attr("real");
        var target = this; /建立一个可以给image.onload函数调用的对象
        var image = new Image();
        image.onload = function complete() { /加载完成
            $(target).attr("status", "loaded"); /加载完成
        }
        function check() { /ie7下显示bug的修复
            if (image.complete) {
                complete();
            } else {
                setTimeout(function() {
                    check();
                },
                500); /每隔0.5秒检查一次
            }
        }
        if (document.all) {
            check();
        }
        image.src = realSrc;
        $(target).attr("status", "loading"); /加载中
    }
});

为了让图片的真实路径在网页加载完成后再异步加载,所以有很多图片都要用到onload事件,但是在不加check()方法前,ie7下总是有几个图片没办法显示出来,但是加上我现在写的check方法。网页显示正常了。 

不过,我突然间由ie的js这么喜欢异步的问题想到,其实不用img.complete属性也是可以在ie下正常触发 img.onload 事件的,就利用ie最喜欢的异步方式,我只要推后解决onload事件就可以了,即把image.src=”xxx.jpg”用setTimoute推迟0.1-0.5秒就可以了,这样子ie就可以先解释到onload事件,再去请求图片了,就不怕因为缓存问题造成图片显示不全了,于是代码修改如下:


dobj.find(".proBox > .image > a > img").each(function() {
    /遍历图片,检查是否需要加载图片
    if ($(this).attr("status") == "unload" || $(this).attr("status") == "") { /未加载的图片
        var realSrc = $(this).attr("real");
        var target = this; /建立一个可以给image.onload函数调用的对象
        var image = new Image();
        image.onload = function complete() { /加载完成
            $(target).attr("status", "loaded"); /加载完成
        }
        /*function check(){/ie7下显示bug的修复
     if(image.complete){
      complete();
     }else{
      setTimeout(function(){check();},500);/每隔0.5秒检查一次
     }
    }
    if(document.all){check();}*/
        setTimeout(function() {
            image.src = realSrc;
        },
        300);
        $(target).attr("status", "loading"); /加载中
    }
});

实验证明,我的猜想是正确的。不过,原来的complete还是暂时保留。


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

中石油谈限气传闻:积极增加供应 4月同比增超15% 一个月撤离7个国家 ofo海外退烧不只是因为水土不服 姆希塔良在曼联独自训练 穆帅拿他比作迪马利亚 俄罗斯总统大选日 普京投下的选票长啥样 保障农民工工资 云南将考核地方政府 高校运动会开幕式堪比阅兵:“火箭坦克”齐上阵 大学生被学长骗去勤工俭学 没开车驾照被记23分 NBA最牛的西决处男拿下第一分!收藏拿走请便 乡村里的“手机争夺战”:孩子抱手机不放打游戏看剧 杨震推荐:里昂客战难胜 南特客战单博平 中国科学家主导 打造“慧眼”卫星“继承者” 专家建议火箭轮休灯泡!季后赛在前别出幺蛾子
外媒:腾讯继百度与阿里后获准在深圳测试自驾车 曝国米回签皇马中场干将 斯帅钦点 已开展谈判 为什么手机电量消耗非常快?给你讲讲“容量衰减” 科学家发现宇宙最早恒星形成证据 136亿年前诞生(图) 朝韩首脑会晤在即 韩国军方却在偷偷买钻地导弹 老太持矿泉水瓶协助指挥交通 交警:存安全隐患 产甲烷微生物或许能在土卫二生存:冲绳甲烷球菌胜出 支付宝北美负责人:支付宝钱包不是给美国人准备的 高瓴资本与阿里“抢食”肯德基?张磊在下什么棋 外界力拱马英九夫人参选台北市长 将挑战柯文哲? 万钢:我跟马斯克认识很久 曾开过他们第一辆电动汽车 文在寅宣布建调查团 彻查“光州事件”军人性犯罪
[新浪彩票]11日竞彩盘口剖析:普瑞兰斯如愿以偿 平衡车爆炸13秒烧了一个家 监控拍下这一幕太吓人 库什纳安全权限被降级 美媒:至少四国曾想利用他 吉尔吉斯斯坦发生一起集体食物中毒事件 14人住院 双线溃败索萨阵脚已凌乱 权健看台已出现下课声 英媒称英国购物村受中国游客追捧:中国人扎堆买 揭秘网红糕点店为何永远在排队:12小时当托排10次 德国政府直接出手 中企入股德电网巨头再受挫 洪秀柱投书日媒:追求和平繁荣才是台湾共识 身无分文怎样白手起家 什么生意前景好 女人开什么店比较好 适合农村办厂的项目 AG亚游集团