js 图片加载失败,所导致的浏览器兼容问题

问题描述

网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的。情况如下:


不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大的默认图,例如PC端的火狐,IOS中Safari,还有安卓中的UC浏览器。这样在手机中就会导致左右两侧图片高度不一致!如下图:

解决方案

其实这里解决很简单,判断当图片加载失败的时候给一个默认图就可以了,不让浏览器使用其自带的默认图。

 代码如下 复制代码

<img src="/noimage2.png" onerror="javascript:this.src='/noimage2.png';" alt="pic" />

衍生问题

因为图片加载失败进入默认图,那么默认图再加载失败怎么办呢?这不是进入一个死循环吗?

最简单的一个解决办法是,onerror中的图保证能打开,保证比较小!不会出现问题!。这个方法也是最有效的方法!

假如你不能保证,那么,只能靠函数来解决这个问题了!

思路是:

当图片加载失败,进入onerror的时候,判断onerror的图片是不是能加载,在onerror中的图片触发onerror的时候,设置onerror为null。

代码如下所示

 代码如下 复制代码

<img src="haorooms.gif" onerror="nofind();" />

<script type="text/javascript"> 

    function nofind(){ 
        var img=event.srcElement || event.target ;  //获取img对象,火狐是event.target ,IE及谷歌其他是event.srcElement
        console.dir(img);//大家可以打印看一下
        img.src="mapmoren.png";
        img.onerror=null;  
    } 

</script> 

时间: 2024-09-17 22:31:29

js 图片加载失败,所导致的浏览器兼容问题的相关文章

图片加载失败,所导致的浏览器兼容问题

网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的.情况如下: 不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大的默认图,例如PC端的火狐,IOS中Safari,还有安卓中的UC浏览器.这样在手机中就会导致左右两侧图片高度不一致!如下图: 解决方案 其实这里解决很简单,判断当图片加载失败的时候给一个默认图就可以了,不让浏览器使用其自带的默认图. <img src=http://www.aseoe.com/&quo

js图片加载获取不到宽度和高度解决方法总结

第一次浏览的时候你根本就获取不到图片的宽高值,打印出来都是0,这些纠结了吧,怎么解决呢?就用setTimeout延时加载,200毫秒之后就执行,等图片彻底加载完之后就可以获取宽高了,这样就实现了只适应宽高和水平垂直居中了. 代码  代码如下 复制代码 var parent=$(".imgshow a img");         parent.click(function(){  //alert(test.width());                 var url=$(this

解决js图片加载时出现404的问题_javascript技巧

运营网站久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在.常见的解决方案是将404图片隐藏或者是替换为默认的图片. img标签事件属性 img标签可使用的时间属性有:onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart,

js图片加载效果代码

提示:您可以先修改部分代码再运行 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head

迅雷加载项会导致IE9浏览器崩溃

相信很多网友今天启动电脑后的第一件时间就是下载IE9beta,看到IE浏览器的新界面以后感觉确实比之前的版本要简洁很多,色彩的搭配也更加舒服了.安装完毕以后立即打开浏览器体验,随便输入了一个网页打开即报错崩溃了.严重的打击了我对IE9的信心,还好找到了是迅雷图片浏览器插件导致的问题,并非浏览器本身的问题. 解决方法: 打开管理加载项,找到迅列的插件,把"迅雷网页图片浏览器IE支持"禁用就可以了,开始体验IE9吧 有兴趣的可以自己下载安装试试看,相信IE9会给你带来惊喜的. 友情提醒,I

js 图片加载效果

程序代码 var proMaxHeight = 40; var proMaxWidth  = 120; function proDownImage(ImgD){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/

图片onerror事件,为图片加载指定默认图片

为图片指定加载失败时显示默认图片,js输出的img对象,onerror是事件,不是属性,所以这样写是不起作用的: var img = $(document.createElement("IMG"));     img.attr({         "src": imgs[idx],         "alt": tips[idx],         "onerror":"this.src='" + NoPi

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" />.这样浏览器就不会自动加载图片,等到一个恰当的时机需要加载