`
shao_lixin
  • 浏览: 52582 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用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>
分享到:
评论

相关推荐

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

    通过这个练习,你将熟练掌握jQuery的基本用法,包括选择器、事件处理、动画和Ajax,同时也能了解如何将这些技术应用于实际的英雄联盟简介页美化项目中。不断地实践和探索,你将能够创造出更丰富、更具交互性的网页...

    jQuery 事件以及处理方法

    jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了DOM操作、事件处理和动画等功能。在jQuery中,事件处理是核心功能之一,它使得用户与网页交互变得更加动态和响应。本篇将详细介绍jQuery中的事件以及处理方法...

    Jquery实现预览效果

    在网页开发中,jQuery(通常简称为jq)是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。标题“Jquery实现预览效果”指的是使用jQuery来实现在用户选择图片文件后立即显示预览图的...

    jquery多个图片上传和回显

    在jQuery中,我们可以使用`change`事件来监听文件选择的变化,然后使用`FormData`对象来封装文件数据,最后使用`$.ajax`或`$.post`方法将这些数据发送到服务器。例如: ```javascript $("#uploadInput").on("change...

    JQ 获取图片真实宽高

    在JavaScript的世界里,jQuery(简称JQ)是一个广泛使用的库,它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。"JQ 获取图片真实宽高"这个标题指的是使用jQuery来获取图片在页面加载完成后的真实宽度和高度...

    JQUERY上传图片预览功能

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

    jquery图片预览插件实例

    可以使用jQuery的`$('&lt;img&gt;')`来动态创建元素,并设置其`src`属性为图片数据。 4. **图片加载处理**:由于图片加载可能需要时间,我们需要监听`load`事件来确保图片完全加载后再进行显示。此外,我们还可以添加`...

    jQuery多张图片上传预览代码

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

    JQuery常用属性说明

    在JQuery中,事件处理通过绑定事件处理器来实现,这些处理器可以响应用户的交互或者页面状态的变化。以下是JQuery支持的一些常见事件: 1. `blur()`: 当元素失去焦点时触发,如`input`、`textarea`等。 2. `change...

    jQuery详细教程

    jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中: 实例 ...

    jQuery实现模式窗口登录

    1. **jQuery库的使用**:jQuery是一个快速、简洁的JavaScript库,使得开发者能够用更少的代码完成更多的功能。 2. **创建和显示模态窗口**: - 使用`$.extend`方法扩展jQuery对象,增加自定义的方法`showDialog`和`...

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

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

    jquery图片交换

    在IT行业中,jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。"jquery图片交换"这个主题是关于利用jQuery实现图片的动态位置交换,常见于产品列表或者轮播图等场景,使得...

    jQuery开源自制上传头像插件

    2. **jQuery选择器与事件绑定**:利用jQuery的选择器,我们可以轻松地找到页面上的元素并绑定事件。例如,我们可以在`#avatarInput`上监听`change`事件,当用户选择文件后触发。 ```javascript $('#avatarInput')....

    jQuery生成微信二维码名片扫码添加联系人代码

    2. **jQuery事件绑定**:使用jQuery的`$(document).ready()`函数确保DOM加载完成后再执行代码。监听表单提交事件,阻止默认行为并收集表单数据。 ```javascript $(document).ready(function() { $('#contact-form'...

    jQuery手机移动端注册表单验证代码.zip

    每个输入框可以通过不同的ID或class被jQuery选择器选中,然后绑定相应的事件监听器,如`$(document).ready()`用于页面加载完成后执行的初始化操作,`$('input').on('input', function() {...})`用于监听输入事件。...

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

    在jQuery 1.9之后,error事件的使用已经不被推荐,但仍可在旧版本中使用。为了向后兼容,可以使用.on()方法来替代.error(),如下: ```javascript $(function(){ $('img').on('error',function(){ alert('error');...

    Jquery焦点图代码 从datatable中取值

    在网页开发中,jQuery是一种广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题将深入探讨如何使用jQuery实现焦点图功能,并从datatable数据源中获取值。焦点图,又称为轮播图或幻灯片,是...

    jquery实现图片预览,缩略图,效果不错

    jQuery的`.on()`方法可以绑定这些事件,如`change`事件,当用户选择文件时触发。 ```javascript $('input[type="file"]').on('change', function(e) { var file = e.target.files[0]; // 使用FileReader API读取...

    懒加载jquery.lazyload.js

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

Global site tag (gtag.js) - Google Analytics