IMG加载默认图备用方案

学习笔记 · 06-16 13:35

在浏览网页时,是不是有时会碰到图片加载不出来的情况?这可太糟心啦!今天给大家分享一个 img 图片加载失败时显示默认图片的方法。在本站中,此方法只用于"友链"部分)。

缘由

JavaScript代码冲突,导致原方法无法触发 onerror 事件和调用 handleImageError 函数。

解决方法

1.引入Js代码

在需要使用该方法的地方重新引入以下Js代码:

<script type="text/javascript">
function slnotimg() {
var img = event.srcElement;
img.src = "加载默认图";
img.onerror = null; 
}
</script>

2.添加Src属性

img 标签的 Src=" " 中添加以下新属性:

onerror="slnotimg();"

例如:

<img src="加载默认图" onerror="slnotimg();"/>
此方法可单独用于 img 加载默认图使用,也可以用作原方法失效时的备用方案使用。

完!

优化 源码分享 img

上一篇 : 昨夜雨,今日事

下一篇 : HTML前端配色表


  1. 2024-07-05 16:48 第21楼 中国北京市CNIX(皓宽网络)互联网交换中心Windows 10 · Google Chrome

    这方法不错呢,我去研究一下~

    1. 刘郎   博主
      2024-07-05 16:51 第22楼 中国贵州省移动iPhone · Safari
      @Teacher Du

      这是来挖矿吗 哈哈 方法的确可以 值得一试

  2. hary   访客
    2024-06-21 08:39 第20楼 中国安徽省合肥市联通Android · Google Chrome

    不明觉厉,哈哈哈

  3. 龙笑天   访客
    06-18 13:15 第18楼 中国广东省深圳市联通Windows 10 · FireFox

    图片的这个onerror事件确实妙用无穷,我记得网站防镜像就可以用他来对付~

    1. 刘郎   博主
      06-18 13:45 第19楼 中国贵州省移动Windows 10 · QQ Browser
      @龙笑天

      嗯哼 😉

  4. 06-17 11:59 第15楼 中国安徽省安庆市电信Windows 10 · QQ Browser

    还可以这样玩的嘛

    1. 刘郎   博主
      06-17 13:03 第16楼 中国移动iPhone · Safari
      @胖氪笔记

      当然了 好东西 从不吝啬分享

      1. 06-17 13:39 第17楼 中国安徽省安庆市电信Windows 10 · QQ Browser
        @刘郎

        大佬啊,收下我的膝盖

  5. Kevin   访客
    06-16 22:17 第13楼 中国安徽省合肥市联通Windows 10 · Google Chrome

    这对于非科班出身的我来说。。。太超纲了

    1. 刘郎   博主
      06-17 01:08 第14楼 中国移动iPhone · Safari
      @Kevin

      😂嗯哼

  6. dujun   访客
    06-16 20:40 第9楼 中国浙江省杭州市华数iPhone · Google Chrome

    图片加载我有个很妙的设计——前提是我全站都是用 JS DOM 渲染而成的。图片元素我会先在主 DOM 构建一个 img 元素,用灰色 cavans 占位。然后虚空 DOM 构建 img 尝试 load,一旦 onerror 就删除虚空 DOM 每秒重试一次。一旦 load 成功就意味着图片已经在本地缓存了,直接替换主 DOM 的 img src。妙就妙在,onerror 我不是重试,而是重建元素来一遍,避免乱七八糟的问题。

    1. 刘郎   博主
      06-16 20:51 第10楼 中国移动iPhone · Safari
      @dujun

      不得不说 这个设计很不错👍用灰色 canvas 占位和在虚空 DOM 中进行加载尝试的策略很独特 通过重建元素处理 onerror 能够规避很多潜在问题,这一点想得很周全。
      但… 你是否考虑过浏览器对于这种频繁的 DOM 操作的兼容性呢?还有就是我用的服务器怕承受不了这个内存占用的压力(说白了,就是服务器太拉胯了😂)

      1. dujun   访客
        06-16 21:01 第11楼 中国浙江省杭州市华数iPhone · Google Chrome
        @刘郎

        服务器只吐出原始数组,页面渲染都由 JS 完成。这么做的原因要追溯到我一开始买的服务器是 1 核 2G,无所不用其极地将压力转嫁给用户的浏览器。

        1. 刘郎   博主
          06-16 21:06 第12楼 中国移动iPhone · Safari
          @dujun

          哈哈 方法的确是不错😂

  7. obaby   Lv2
    06-16 17:53 第7楼 中国山东省临沂市联通Windows 10 · Google Chrome

    插眼,备用😁

    1. 刘郎   博主
      06-16 17:54 第8楼 中国移动iPhone · Safari
      @obaby

      咦,这评论出问题了吗😂

  8. 06-16 17:13 第3楼 中国福建省宁德市电信Windows 10 · Google Chrome

    插眼,备用😁

    1. 刘郎   博主
      06-16 17:16 第4楼 中国移动iPhone · Safari
      @湘铭呀!

      咦~ 复制粘贴吗

      1. 06-16 17:17 第5楼 中国福建省宁德市电信Windows 10 · Google Chrome
        @刘郎

        方法记下了,哈哈哈哈

        1. 刘郎   博主
          06-16 17:18 第6楼 中国移动iPhone · Safari
          @湘铭呀!

          哈哈😎

  9. JacyLunatic   访客
    06-16 15:23 第1个脚印 中国上海市东方有线Windows 10 · Google Chrome

    插眼,备用😁

    1. 刘郎   博主
      06-16 16:26 第2楼 中国移动iPhone · Safari
      @JacyLunatic

      哈哈

| 黔ICP备2024020400号-1 | 萌ICP备20246777号 | | 当前有 2 人在线 |
本站已加入BLOGS·CN
yjvc.cn
博友圈 星球穿梭
开往-友链接力