当前位置:jQuery学习 > jQuery > jQuery error()方法移除失效图片

jQuery error()方法移除失效图片

时间:2010-09-20QQ群:116983258

本篇使用jQuery error()方法来对失效的图片链接进行处理,这样也可以提高网站的用户体验。网站中失效的图片,我们应该进行一下处理,不然会出现找不到图片时出现的小图标,显得非常难看。

比如在网站中,我们有如下图片。

mooncake

由于各种原因导致图片路径无效时,我们可以使用jQuery error()方法进行一下处理。

<img src="mooncake1.jpg" alt="mooncake" />
<p>中秋节我们吃月饼</p>

我们使用jQuery error()方法如下:

$(document).ready(function() {
    $("img").error(function() {
        $(this).remove();   //1.remove the image
        $(this).attr("src", "no-image.jpg");    //2.replace the image
    });
});

可以看出,提供了两种处理方法。方法1使用了jQuery remove()方法,对找不到的图片进行了移除,这样该失效图片在页面中将不会进行显示;方法2对图片的路径进行了替换,如果找不到图片,替换为我们网站找不到图片时的默认图片,这不失为一种好的处理方法。

本篇就是这么简单的一个技巧,使用了jQuery error()方法对失效图片进行了适当的处理。

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/user-jquery-error-method.html

大家说了些什么

  1. 1. 墨水 2010-10-15 20:50

    这个办法不错,谢谢分享。

  2. 2. q 2011-08-04 09:33

    为什么IE和火狐不支持?

所有话题