先检查图片是否加载成功,然后如果失败的话再绑定事件。而且替换一次就好了。
<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'"属性。
相关推荐
本文主要讨论页面中图片加载失败后...1.1 给图片绑定error事件 当图片加载失败时会触发error事件 $(img).on(error, function () { $(this).attr(src, ../img/img.jpg); }); 不建议事件事件属性onerror,你懂的~O.o
这段代码的意思是,通过jQuery选择所有图片元素,并给它们绑定error事件处理函数。当某个图片元素的加载失败时,error事件被触发,然后执行该事件处理函数。函数内部使用attr方法来改变失败图片的src属性,将其指向...
3. **事件绑定**:可以监听`load`和`error`事件,处理加载成功或失败的情况。 **五、性能优化** 1. **预加载**:可以设置一个预加载区域,提前加载即将进入视口的资源,提高用户体验。 2. **图片尺寸优化**:为了...
而jQuery提供了一种更简洁的方式,通过`.load()`或`.ajax()`方法可以实现异步加载新内容,或者使用`.click()`绑定点击事件来触发页面跳转。 1. 使用`.load()`方法: ```javascript $("#targetDiv").load("newPage....
此外,我们还可以添加`error`事件处理图片加载失败的情况。 5. **CSS样式调整**:预览元素的位置、大小以及样式可以通过jQuery的CSS方法进行调整,以达到预期的预览效果。 6. **动画效果**:jQuery提供了丰富的...
- 为提高性能,避免一次性绑定大量图片的`load`事件,可以使用事件委托,或者只针对可见图片进行处理。 - 使用CSS属性`display:none`隐藏图片,然后在需要显示时再计算尺寸,可以避免因图片加载影响页面渲染。 6....
4. **加载图片**:如果图片已经进入视口,插件会替换图片的`src`属性为真实的URL,从而触发浏览器加载图片。 ### 三、使用步骤 1. **引入依赖**:首先需要引入jQuery库和`jQuery LazyLoad`插件的JS文件。在本例中...
上述代码中,如果图片加载失败,将会执行回调函数中的代码,并且将图片的src属性设置为一张默认的图片(比如'images/no_pic.jpg'),这样就避免了显示“坏图片”图标。 对于不使用jQuery的项目,可以通过HTML的DOM...
这个压缩包"基于jquery实现的Flash加载远程图片带进度条显示效果.zip"似乎包含了一个示例,该示例利用jQuery与Flash技术结合,实现了在加载远程图片时动态显示进度条的效果。这在用户界面设计中是一种优秀的用户体验...
在本实践项目中,我们将深入探讨如何利用jQuery这一强大的JavaScript库来美化英雄联盟的简介页面。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。通过学习这个...
我们使用一个匿名函数将`file`对象绑定到`onload`事件的上下文,这样在图片加载完成后,我们仍然可以访问到原始的文件对象。 最后,如果你希望上传图片到服务器,可以使用Ajax和FormData。创建一个FormData对象,将...
当用户再次访问页面时,如果服务器已经保存了之前的图片信息,前端需要根据这些信息加载并显示图片。这可以通过Ajax请求获取已上传图片的信息,然后按照前面提到的方式动态创建`<img>`标签来完成。 综上所述,实现...
2. **编写JavaScript代码**:创建一个函数,该函数负责检查图片是否在视口内,如果在,则加载图片。使用`$(window).scroll()`监听滚动事件,然后利用`$(window).scrollTop()`和`$(window).height()`计算用户当前可视...
本篇文章将深入探讨如何使用jQuery来解决文章内容以及图片的分页显示问题。 首先,我们需要了解分页的基本原理。分页通常涉及两个主要步骤:数据切片和界面渲染。数据切片是指将原始的长篇文章或包含图片的数据分割...
2. **使用jQuery绑定事件**: 使用`.on()`方法绑定`change`事件到文件输入元素,当用户选择文件后触发。 ```javascript $("#imageInput").on("change", function(e) { // 事件处理代码 }); ``` 3. **读取文件...
关于如何使用jQuery来处理图片坏链的知识点,实际上涉及到了前端开发中处理图片加载失败的一种技巧。图片作为网页内容的重要组成部分,其加载状态直接影响到用户的浏览体验。当图片因为多种原因无法加载成功时,如...
"jquery图片交换"这个主题是关于利用jQuery实现图片的动态位置交换,常见于产品列表或者轮播图等场景,使得用户可以方便地调整图片顺序或展示效果。这种功能尤其适用于电商平台,以便用户按需排列产品展示顺序,同时...
通过使用jQuery的选择器和事件绑定方法,可以针对页面中所有的`<img>`标签设置错误处理逻辑。具体代码如下所示: ```javascript $("img").error(function(){ $(this).attr("src", "Images/error.jpg"); }); ``` ...
文件输入元素用于让用户选择要上传的图片,预览区域则显示选中图片的缩略图。 2. **JQuery选择器与事件绑定**: 使用JQuery的选择器找到文件输入元素,并绑定`change`事件监听器。当用户选择文件时,该事件会被触发...