`

使用jquery给img绑定error事件的问题(页面图片如果加载失败则用默认图片显示)

阅读更多

先检查图片是否加载成功,然后如果失败的话再绑定事件。而且替换一次就好了。

 

<img src="xxxx.jpg" alt="" />

<script>
jQuery(document).ready(function(){
    jQuery('img').each(function(){
        var error = false;
        if (!this.complete) {
            error = true;
        }

        if (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) {
            error = true;
        }

        if(error){
            $(this).bind('error.replaceSrc',function(){
                this.src = "default_image_here.png";

                $(this).unbind('error.replaceSrc');
            }).trigger('load');
        }
    });
});
</script>

 接下来这个我测试过很有效果的:

$(window).load(function() { 
  $('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      this.src = 'http://www.tranism.com/weblog/images/broken.gif'; 
      } 
   });
});

 但是IE6的时候会出现不兼容的情况所以,最好的方法是在每个标签上增加 onerror = "this.src='/cqabc/images/huancun.gif'"属性。

分享到:
评论

相关推荐

    jQuery图片加载失败替换默认图片方法汇总

    本文主要讨论页面中图片加载失败后...1.1 给图片绑定error事件 当图片加载失败时会触发error事件 $(img).on(error, function () { $(this).attr(src, ../img/img.jpg); }); 不建议事件事件属性onerror,你懂的~O.o

    jQuery处理图片加载失败的常用方法

    这段代码的意思是,通过jQuery选择所有图片元素,并给它们绑定error事件处理函数。当某个图片元素的加载失败时,error事件被触发,然后执行该事件处理函数。函数内部使用attr方法来改变失败图片的src属性,将其指向...

    懒加载jquery.lazyload.js

    3. **事件绑定**:可以监听`load`和`error`事件,处理加载成功或失败的情况。 **五、性能优化** 1. **预加载**:可以设置一个预加载区域,提前加载即将进入视口的资源,提高用户体验。 2. **图片尺寸优化**:为了...

    jquery页面跳转loading加载.rar

    而jQuery提供了一种更简洁的方式,通过`.load()`或`.ajax()`方法可以实现异步加载新内容,或者使用`.click()`绑定点击事件来触发页面跳转。 1. 使用`.load()`方法: ```javascript $("#targetDiv").load("newPage....

    jquery图片预览插件实例

    此外,我们还可以添加`error`事件处理图片加载失败的情况。 5. **CSS样式调整**:预览元素的位置、大小以及样式可以通过jQuery的CSS方法进行调整,以达到预期的预览效果。 6. **动画效果**:jQuery提供了丰富的...

    JQ 获取图片真实宽高

    - 为提高性能,避免一次性绑定大量图片的`load`事件,可以使用事件委托,或者只针对可见图片进行处理。 - 使用CSS属性`display:none`隐藏图片,然后在需要显示时再计算尺寸,可以避免因图片加载影响页面渲染。 6....

    jquerylazyload延迟加载图片的jQuery插件

    4. **加载图片**:如果图片已经进入视口,插件会替换图片的`src`属性为真实的URL,从而触发浏览器加载图片。 ### 三、使用步骤 1. **引入依赖**:首先需要引入jQuery库和`jQuery LazyLoad`插件的JS文件。在本例中...

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

    上述代码中,如果图片加载失败,将会执行回调函数中的代码,并且将图片的src属性设置为一张默认的图片(比如'images/no_pic.jpg'),这样就避免了显示“坏图片”图标。 对于不使用jQuery的项目,可以通过HTML的DOM...

    基于jquery实现的Flash加载远程图片带进度条显示效果.zip

    这个压缩包"基于jquery实现的Flash加载远程图片带进度条显示效果.zip"似乎包含了一个示例,该示例利用jQuery与Flash技术结合,实现了在加载远程图片时动态显示进度条的效果。这在用户界面设计中是一种优秀的用户体验...

    练习2:使用jQuery美化英雄联盟简介页.zip

    在本实践项目中,我们将深入探讨如何利用jQuery这一强大的JavaScript库来美化英雄联盟的简介页面。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。通过学习这个...

    jQuery多张图片上传预览代码

    我们使用一个匿名函数将`file`对象绑定到`onload`事件的上下文,这样在图片加载完成后,我们仍然可以访问到原始的文件对象。 最后,如果你希望上传图片到服务器,可以使用Ajax和FormData。创建一个FormData对象,将...

    jquery多个图片上传和回显

    当用户再次访问页面时,如果服务器已经保存了之前的图片信息,前端需要根据这些信息加载并显示图片。这可以通过Ajax请求获取已上传图片的信息,然后按照前面提到的方式动态创建`&lt;img&gt;`标签来完成。 综上所述,实现...

    jQuery动态图片加载代码

    2. **编写JavaScript代码**:创建一个函数,该函数负责检查图片是否在视口内,如果在,则加载图片。使用`$(window).scroll()`监听滚动事件,然后利用`$(window).scrollTop()`和`$(window).height()`计算用户当前可视...

    jquery 文章分页jQuery分页的解决图片和内容分页显示

    本篇文章将深入探讨如何使用jQuery来解决文章内容以及图片的分页显示问题。 首先,我们需要了解分页的基本原理。分页通常涉及两个主要步骤:数据切片和界面渲染。数据切片是指将原始的长篇文章或包含图片的数据分割...

    JQUERY上传图片预览功能

    2. **使用jQuery绑定事件**: 使用`.on()`方法绑定`change`事件到文件输入元素,当用户选择文件后触发。 ```javascript $("#imageInput").on("change", function(e) { // 事件处理代码 }); ``` 3. **读取文件...

    如何使用jQuery来处理图片坏链具体实现步骤

    关于如何使用jQuery来处理图片坏链的知识点,实际上涉及到了前端开发中处理图片加载失败的一种技巧。图片作为网页内容的重要组成部分,其加载状态直接影响到用户的浏览体验。当图片因为多种原因无法加载成功时,如...

    jquery图片交换

    "jquery图片交换"这个主题是关于利用jQuery实现图片的动态位置交换,常见于产品列表或者轮播图等场景,使得用户可以方便地调整图片顺序或展示效果。这种功能尤其适用于电商平台,以便用户按需排列产品展示顺序,同时...

    jquery解决图片路径不存在执行替换路径

    通过使用jQuery的选择器和事件绑定方法,可以针对页面中所有的`&lt;img&gt;`标签设置错误处理逻辑。具体代码如下所示: ```javascript $("img").error(function(){ $(this).attr("src", "Images/error.jpg"); }); ``` ...

    JQuery图片上传预览

    文件输入元素用于让用户选择要上传的图片,预览区域则显示选中图片的缩略图。 2. **JQuery选择器与事件绑定**: 使用JQuery的选择器找到文件输入元素,并绑定`change`事件监听器。当用户选择文件时,该事件会被触发...

Global site tag (gtag.js) - Google Analytics