html 图片显示一块一块加载失败,页面中图片加载失败的优化方法

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

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

解决方案

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

衍生问题

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

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

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

思路是：

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

代码如下：

function nofind(){

var img=event.srcElement || event.target ; //获取img对象，火狐是event.target ，IE及谷歌其他是event.srcElement

console.dir(img);//大家可以打印看一下

img.src="mapmoren.png";

img.οnerrοr=null;

}

这样就正常了，可以避免视觉和布局效果啦。

html 图片显示一块一块加载失败,页面中图片加载失败的优化方法相关推荐

js页面中实现加载更多功能
js页面中实现加载更多功能分页-如何实现加载更多功能,目前的在很多网站上使用的加载更多功能中,使用最多的是iscroll.js实现的上拉加载更多.下拉刷新功能.但是iscroll.js本身并没有集成 ...
js 图片下载（不是直接在页面打开图片）
浏览器图片下载(而不是直接在页面打开图片) 项目中出现了用户要下载图片的情况,做完了功能之后发现根本下载不了,都是直接在浏览器打开了,搜了好久才找到方法代码如下 function downloadI ...
请求一个action，将图片的二进制字节字符串在视图页面以图片形式输出
有些时候需要将二进制图片字节在发送浏览器以图片形式显示: 下面是一些示例代码: 控制器: 1 /// <summary> 2 /// 将图片的二进制字节字符串在视图页面以图片形式输出 3 ...
js获取html中图片路径,用js快速的获取html页面中图片的地址
这次给大家带来用js快速的获取html页面中图片的地址,用js快速获取html页面中图片的地址的注意事项有哪些,下面就是实战案例,一起来看一下. 这篇文章主要介绍了js获取html代码中图片地址的实现 ...
pic32linux,Linux_页面中图片漂浮 Floating picⅢ 的制作，最新的图片漂浮脚本，这次的 - phpStudy...
页面中图片漂浮 Floating picⅢ 的制作最新的图片漂浮脚本,这次的变化在于它不是单纯的在某个页面飘动,而是会垮页面飘动,也就是说你打开别的页面,它依然会存在,优先级是第一的,而且如果最小化 ...
浅谈Android中的异步加载之ListView中图片的缓存及优化三
隔了很久没写博客,现在必须快速脉动回来.今天我还是接着上一个多线程中的异步加载系列中的最后一个使用异步加载实现ListView中的图片缓存及其优化.具体来说这次是一个综合Demo.但是个人觉得里面还算 ...
webview 加载php页面内容,WebView加载优化的方法介绍
本篇文章给大家带来的内容是关于WebView加载优化的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. WebView加载优化当WebView的使用频率变得频繁的时候,对于其 ...
JqueryMobile链接一个页面，而链接页面中图片需刷新才显示的问题
当在first.html中,有个链接如:<a href="second.html" data-role="button" id="submit& ...
前端 JS 如何在一个页面中局部加载其它页面的数据
一个页面很大,可以分成多个部分,先把小部分的 jsp 写好之后,再在主页面中通过 Struts 2 标签或 ajax 请求来引入其它的 jsp 显示信息. 通过 jQuery 函数来加载其它页面的数据 ...

html 图片显示一块一块加载失败,页面中图片加载失败的优化方法

html 图片显示一块一块加载失败,页面中图片加载失败的优化方法相关推荐

最新文章

热门文章