js针对图片加载失败的处理方法分析

本文实例讲述了js针对图片加载失败的处理方法。分享给大家供大家参考，具体如下：

在项目中不可避免会用到图片，尤其是列表，有时候图片会加载失败；这样就会显示一个很难看的坏图片缩略图；下面介绍两种方法，解决这个问题：

1、如果在你的项目中有引入jQuery插件，你可以使用error([[data],fn])这个函数；

$("img").error(function(){
  //当图片加载失败时，你要进行的操作
  //$(this).attr('src','images/no_pic.jpg');
});

2、如果项目中没有jQuery这样的插件，可以使用HTML的DOM事件onerror事件处理；

HTML 中:

<element οnerrοr="myScript">

尝试一下

JavaScript 中:

object.οnerrοr=function(){myScript};

尝试一下

JavaScript 中, 使用 addEventListener() 方法:（注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。）

object.addEventListener("error", myScript);

支持的 HTML 标签: <img>, <input type="image">, <object>, <script>, <style>

另外，当图片加载错误的时候,触发onerror事件，还可使用一下方法进行处理:

①. 隐藏

<img src="" onerror="this.style.display = 'none' ">

②. 用默认的图片替换：

<img src="" onerror="this.src='banner_1.png';this.onerror='null' ">

PS：这里再为大家附上javascript系统自带事件参考表供大家参考查询：

javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event

更多关于JavaScript相关内容可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 解决js图片加载时出现404的问题

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

  • 基于jquery的图片懒加载js

    以下是实现代码(基于jquery): 复制代码 代码如下: function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img

  • js实现图片在未加载完成前显示加载中字样

    <html> <title>图片预加载</title> <body> <script> //判断浏览器 var Browser=new Object(); Browser.userAgent=window.navigator.userAgent.toLowerCase(); Browser.ie=/msie/.test(Browser.userAgent); Browser.Moz=/gecko/.test(Browser.userAgent);

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

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

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

  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc

  • js 一个关于图片onload加载的事

    首先先明确一下我要的目的: 当用户进入页面的时候,显示loading 加载图标,等最大的图片加载之后再opacity 图片; 功能很简单,但是很蛋疼的是,我没完全做出来: 在做的时候,第一时间我自然想到了如下的方法: 复制代码 代码如下: $(function(){    $('.banner img').load(function(){        console.log('已经加载')        });}); 熟话说的好呀,自信心太膨胀,到头来打击很大了:我以为这样就可以了,然后看了一

  • JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来.因此,实

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

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

  • js图片延迟加载的实现方法及思路

    大概的实现方式是:在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片.然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来.这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置.通常是用offsetLeft和offsetTo

  • JavaScript判断图片是否已经加载完毕的方法汇总

    在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示: 一.onload事件 通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • javascript实现图片延迟加载方法汇总(三种方法)

    看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的.原理是这样:页面可见区域以下的图片先不加载,等到用户向下滚动到图片位置时,再进行加载.这样做的好处在哪里?--当页面有好几屏内容时,有可能用户只看前几屏的内容,这样我们就可以只加载用户需要看的图片,减少服务器向用户浏览器发送图片文件所产生的负荷,下面通过三种方法给大家

随机推荐