首页 > 其他分享 >图片未加载完时,显示占位图片

图片未加载完时,显示占位图片

时间:2023-01-12 13:46:55浏览次数:36  
标签:img image 占位 完时 添加 background 图片 加载

思路

利用img的背景,且添加图片加载完成事件,当加载完后去除img背景(这样,就算图片背景透明也不会显示)

img {
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.......);
  background-size: 100% 100%;
  background-clip: content-box;
  background-origin: content-box;

}

图片加载完成事件

            // 给刚才添加的img添加加载完成事件,去除加载背景
                for(let imgObj of $("#matchItems").find('img')) {
                   imgObj.onload = function(e) {
                       $(e.target).css({
                          "background": "rgba(0,0,0,0)"
                       })
                   }
                }        

  

标签:img,image,占位,完时,添加,background,图片,加载
From: https://www.cnblogs.com/zhuangjie/p/17046416.html

相关文章

  • C#检测图片文件中包含的异常字符串
    privatestaticvoidPhotoAbnormalCodeCheck(){var ZhaoPian="";//照片base64字符串MemoryStreamms=newMemoryStream(Convert.FromB......
  • vue 文件下载与图片下载
    文件下载window.open(url,'_self')图片下载点击查看代码handleDownload(imgSrc,name){ constimage=newImage(); //解决跨域Canvas污染问题 image.setAttri......
  • uni-app 背景图片
    背景图片uni-app 支持使用在css里设置背景图片,使用方式与普通 web 项目大体相同,但需要注意以下几点:支持base64格式图片。支持网络路径图片。小程序不支持在cs......
  • 图片爬虫程序几行代码轻松搞定
    新手在学习爬虫时,不管是思路还是相关教程新手都可以参照其他人方法,有对的地方也有错的的地方,比如有些方面不太理解,那么可以根据自身实力换成自己能理解的方式,最终代码能跑动......
  • LVGL 中图片使用问题
    此笔记主要是记录在LVGL中使用图片的几种方式,以及使用过程中遇到的问题。最近在ARMlinux中使用LVGL时,发现加载图片变得很卡,一开始还好,当连续加载的图片变多后,特别是......
  • 把 Eagle App 打造成本地后台管理系统,快速构建 WEB 图片网站。
    自己搭建了图片网站,发现不仅需要前端,还需要后台管理系统,就很烦。偶然之间发现了eagleapp这个软件(专门给设计师管理素材的),经过一番测试,发现了这个好玩的方案。如果你也......
  • layui layer 弹窗组件显示图片
    layer弹窗显示表格中的图片。选用layer.photos实例化layer.photos({photos:'#img_'+id,//0-6的选择,指定弹出图片动画类型,默认随机anim:5,});bug点击......
  • 支持不同格式之间的转换 支持图片像素的压缩以及拉长
    支持不同格式之间的转换支持图片像素的压缩以及拉长packagemainimport( "bytes" "errors" "fmt" "image" "image/jpeg" "image/png" "io/ioutil" "os" ......
  • 关于使用gpu解码图片的一些想法
    最近在使用gpu解码数据,数据是base64编码的图片,或者是二进制编码的图片以前都是使用cpu进行解码,也导致cpu使用率比较高使用gpu解码以后存在的问题就是:以yolov5为例,使用pgu......
  • 图片文字同一行
    <divclass=""style="display:flex;align-item:center;justify-content:center;"><imgsrc="@/assets/images/logo555.png"alt=""style="width:60px;vertical-align:m......