js图片加载完成前显示loading效果

桃扇骨 2023-05-29 13:08 122阅读 0赞

<!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
     <meta charset="UTF-8">
    
     <title>loading</title>
    
    </head>
    
    <body>
    
     <img id="img">
    
     <script>
    
      window.onload = () => {
    
       var img = document.querySelector('#img');
    
       img.src = 'http://www.86y.org/images/loading.gif'; // 先加载loading.gif
    
       var newImg = new Image();
    
       newImg.src = 'https://avatars3.githubusercontent.com/u/1?v=3';
    
       newImg.onerror = () => { // 图片加载错误时的替换图片
    
        newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg';
    
       }
    
       newImg.onload = () => { // 图片加载成功后把地址给原来的img
    
        img.src = newImg.src
    
       }
    
      }
    
     </script>
    
    </body>
    
    </html>

转载地址：[https://blog.csdn.net/hahahhahahahha123456/article/details/89931924][https_blog.csdn.net_hahahhahahahha123456_article_details_89931924]

[https_blog.csdn.net_hahahhahahahha123456_article_details_89931924]: https://blog.csdn.net/hahahhahahahha123456/article/details/89931924

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关 js图片加载完成前显示loading效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="U

桃扇骨/ 2023年05月29日 13:08/ 0 赞/ 123 阅读

相关自定义加载loading效果（带图片）

`加载中图片，底色为白色(看不到)` ![在这里插入图片描述][20200913105608103.png_pic_center] 效果如图： ![在这里插入图片描述

青旅半醒/ 2022年12月06日 12:42/ 0 赞/ 356 阅读

相关判断图片加载完成的JS操作

var a = { init:function(){ this.initDom(); this.handleImg

朴灿烈づ我的快乐病毒、/ 2022年09月26日 04:59/ 0 赞/ 318 阅读

相关 react-native 加载动画 loading效果

react-native loading动画（加载动画） 1. 组件代码(demo.js) 2. 调用 3. FAQ ![

朴灿烈づ我的快乐病毒、/ 2022年08月29日 15:53/ 0 赞/ 625 阅读

相关 Lazyr.js – 延迟加载图片（Lazy Loading）

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-la

╰+攻爆jí腚メ/ 2022年08月08日 00:42/ 0 赞/ 624 阅读

相关判断js加载完成

判断js加载完成，（实现函数loadScript(url,callback)异步加载脚本，完成后执行回调函数，要求支持IE）在“按需加载”的要求中，经常要判断当脚本加载完成

清疚/ 2022年06月02日 04:08/ 0 赞/ 439 阅读

相关 js图片加载效果（延迟加载+瀑布流加载）

概述两种图片加载的效果：一种是遇到图片较多时，带读条效果的加载提示；另一种是根据滑块的位置进行预加载，用户不察觉的情况下，实现瀑布流的加载效果详细代码下载

痛定思痛。/ 2022年05月31日 08:57/ 0 赞/ 756 阅读

相关 JS实现页面加载完毕之前loading提示效果

引用：http://qubernet.blog.163.com/blog/static/1779472842014510392573/ 做成js调用： ![Center][

亦凉/ 2022年05月12日 01:04/ 0 赞/ 364 阅读

相关 vue图片加载完成前增加loading效果

这次给大家带来vue[图片][Link 1]加载完成前增加loading效果，vue图片加载完成前增加loading效果的[注意事项][Link 2]有哪些，下面就是实战案例，

小灰灰/ 2022年02月04日 14:27/ 0 赞/ 1105 阅读

相关 uni-app 图片加载前和加载失败显示默认图

问题我们在用 uni-app 开发前端时，经常会用到 image 图片组件，有时图片比较大、网络差或者图片资源已经不存在，就会导致 image 无法显示图片，而呈现出来...

朱雀/ 2021年03月30日 11:08/ 0 赞/ 3243 阅读