图片/图形

错误图片链接修补jQuery插件

阿里云

这是一款非常实用的错误图片链接修补 jQuery 插件。在网页中可能会存在链接错误的图片,这时图片显示的是 alt 的内容或难看的缩略图。如果能自动检测页面上的错误图片链接,在将它们更换为指定的图片,来提示用户这时一张链接错误的图片,将是一种十分好的用户体验。

使用方法

我们可以通过多种方法来实现这个功能,在这个插件中,使用 jQuery 来完成这个功能。该错误图片链接修补插件有两个主要的参数:

也想出现在这里?联系我们
创客主机

complete:是否加载完成

naturalWidth:取原始图像的宽度。如果为 0 或 undefined 则为损坏的形象

该插件十分简单,在页面中引入 jQuery 文件之后,我们编写 brokenImages()函数来修补破损的图片。

  1. <script>
  2. function brokenImages() {
  3.     /* 找到页面中的图片的总数 */
  4.     var totalimg = $('body').find('img').length;
  5.     var brokenimg = 0;
  6.     $('img').each(function () {
  7.         /* 循环图片,使用naturalWidth来判断图片是否损坏 */
  8.         if (!this.complete || typeof this.naturalWidth == 'undefined' || this.naturalWidth == 0) {
  9.             brokenimg++;
  10.             /* 用指定的图片URL替换损坏图片的URL */
  11.             this.src = 'img/nIrhl0z.png';
  12.         }
  13.     });
  14.     alert(brokenimg + ' of ' + totalimg + ' image(s) are broken. I fixed them!');
  15. }
  16. $('.demo').click(function () {
  17.     $(this).remove();
  18.     brokenImages();
  19. });
  20. </script>

错误图片链接修补插件至此编写完成,在页面加载完毕后调用该插件即可修补链接错误的图片:

  1. $(document).ready(function(){
  2.   brokenImages();
  3. });

错误图片链接修补 jQuery 插件

已有 403 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!