实现图片加载前显示loading之类

HackProgramer HackProgramer 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.5k累计阅读 1.5k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄12年
关注
转载 最新推荐文章于 2026-06-14 09:00:00 发布 1.5k 阅读 AI 写同款· GEO 优化 ›
模仿京东首页DIV懒加载，根据滚动条来加载div 原理是先将需要展示内容的div单独提取出来，放到一个新的页面，在需要展示的时候，直接通过AJAX请求页面，然后展示，实现DIV懒加载，在数据多的时候可以将数据分成很多段，用户滚动到需要展示的位置在加载，大大提高打开网页的速度。 效果图： 1.在没有拉到底部的时候显示一个gif加上提示语 2.在滚动条拉到底部的时候，加载下一页内容 HTML： <div id="tiezi"... 阅读详情
<style>
#loader{
visibility:hidden;
}
</style>
<span id="loaderInfo">Loading...</span>

<img id="loader" onload="this.style.visibility='visible';loaderInfo.style.display='none'" src="<a href="http://desk.blueidea.com/DESK/16001200BZ/1600WaterCity_3/1600WaterCity_3001.jpg" "="" style="text-decoration: none; color: rgb(54, 100, 157); font-family: simsun; font-size: 14px; line-height: 21px; background-color: rgb(254, 254, 254);">http://desk.blueidea.com/DESK/16001200BZ/1600WaterCity_3/1600WaterCity_3001.jpg"/>




收录于
html/html5

当前文章被收录于：

html/html5
11 篇文章 0 人学习
订阅专栏 查看详情
loading图片 NULL 博文链接：https://shikonglaike.iteye.com/blog/1223934 立即下载

相关推荐

性能提高 ： 一张图片实现Loading

以前，自己实现Loading的时候，一般采用的是，帧动画（就是用很多图片实现的动画）。但是，这样有一个弊端，就是很多图片加载进来，会耗费很多内存，导致性能的降低。为了实现一个简单的小小功能，就浪费了那么多资源，有点得不偿失。后来，自己有一天不小心接触到了，新的技术，发现，居然用一张图片就可以实现Loading。

网页图片加载loading效果实现

网页加载图片时通常用背景图来显示，这样能确保图片不被拉伸变形。这个时候就需要用到img标签的onload函数来确认图片已经下载成功。实现方法如下：1、把图片地址绑定到目标元素身上 url即为图片地址，src为div属性2、用js获取src属性后，new Image();出一个图片，并赋值src地址var img = new Image();img.sr...

weixin_33998125的博客 1482

loading图片(多种进度条动画)

loading多种进度条动画图片,很酷的!!

图片完全载入前显示loading的方法.

<style>#loader{visibility:hidden;}</style><span id="loaderInfo">Loading...</span><img id="loader" onload="this.style.visibility='visible';loaderInfo.style.display='none'" sr...

weixin_33850015的博客 215

【Java完整版 面试必备】Leetcode Top100题目和答案-滑动窗口篇

【Java完整版 面试必备】Leetcode Top100题目和答案-滑动窗口篇

weixin_43298211的博客 2246

铝合金外壳表面处理工艺全解析：从阳极氧化到瓷泳喷涂的7种方法对比

本文全面解析了铝合金外壳的7种主流表面处理工艺，包括阳极氧化、粉末喷涂、瓷泳喷涂等。通过对比其原理、性能、成本与应用场景，为产品设计师和工程师提供了从防护性、装饰性到功能性的立体选型框架，帮助您根据具体需求选择最佳工艺方案。

weixin_29278805的博客 743

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

加载中图片，底色为白色(看不到) 使用方法 this.tool.showLoading('加载中', this) this.tool.showLoading('合成中', this) this.tool.hideLoading() 引用文件 在App.vue中 <style scoped> @import './common.css'; </style> 在main.js中 import tools from './tools' Vue.prototype.tool

无知者无畏 2385

详解k-means++

一、概述 定义：k-means++是一种为k-means聚类算法选择初始值（或“种子”）的算法。它是NP-hard k-means问题的一种近似算法，它是一种避免标准k-means算法有时发现的较弱聚类的方法。 K-means与K-means++：原始K-means算法最开始随机选取数据集中K个点作为聚类中心，而K-means++按照如下的思想选取K个聚类中心：假设已经选取了n个初始聚类中心(0<n<K)，则在选取第n+1个聚类中心时：距离当前n个聚类中心越远的点会有更高的概率被选为第n+1个聚

qq_42364307的博客 3万+

Vue实现图片loading

在网络慢的情况下请求图片用loading来替换空白屏。图片路径错误也也可以用另一张图来替换默认的破损图。

maohangfei.cn 1742

从零构建：ESP32S3无线DAP-Link调试器的硬件与软件协同设计

本文详细介绍了基于ESP32S3的无线DAP-Link调试器的硬件与软件协同设计，涵盖关键元器件选型、无线通信协议优化、双核任务处理及低功耗调试方案。通过ESP-NOW协议实现低延迟无线调试，结合USB协议栈与双核协同，为嵌入式开发提供高效灵活的调试解决方案。

gitlab7runner的博客 859

直流耦合系统介绍

参考《SMA如何使用直流耦合技术实现更高效的光伏电站-白皮书》

圆桌骑士的博客 732

vue实现图片加载完成前的loading组件

本人新开个人博客，后期所有文章只在博客中更新！         export default {         props: ['src'], // 父组件传过来所需的url         data() {             return {                 url: 'http://www.86y.org/images/loading.gif'

_破败的博客 2万+

别再乱改宏定义了！STM32F103程序移植保姆级教程（从C8T6到ZET6实战）

本文详细解析了STM32F103程序从C8T6移植到ZET6的实战步骤，重点介绍了硬件差异、开发环境配置、时钟陷阱及外设处理等关键点。通过修改宏定义（如STM32F10X_HD）、调整启动文件和时钟配置，确保移植顺利进行。适合嵌入式开发者参考，避免常见移植问题。

weixin_42567497的博客 215

React中img图片加载完成前的loading效果

React中img图片加载完成前的loading效果 我在React中有这么一个需求，那就是我希望在图片加载完成前的时候一直显示loading动画效果，等图片加载完成了就实现图片的渲染 先讲讲具体的思路，再来说说实际的应用 实现思路： // 假设我要加载这三张网页图片 var imglist = ['http://example.com/demo1.png','http://example.c...

qq_41672008的博客 4992

k230 +canMV+ LVGL控件 仿手表表盘触摸屏滚动、选中后弹窗效果完整示例程序

现在智能手表用的越来越多，其交互方式比较有特点，现在k230开发板上，基于LVGL（Light and Versatile Graphics Library）编写一个嵌入式GUI应用程序，使用LVGL配合触摸屏实现模仿智能手表的表盘滚动效果，实际效果如下：程序使用LVGL图形库和MediaManager程序，创建带有触摸屏交互的GUI应用。程序主要功能包括显示初始化、LVGL初始化、创建GUI界面（包含一个可滚动的按钮列表，每个按钮点击会弹出消息框），以及处理触摸屏输入。

weixin_47446386的博客 1175

YOLOv11【第六章：模型压缩与极致优化篇·第4节】Lamp 剪枝算法：无需超参的自动化剪枝策略！

🏆 本文收录于专栏 《YOLOv11实战：从入门到深度优化》。本专栏围绕 YOLOv11 的改进、训练、部署与工程优化 展开，系统梳理并复现当前主流的 YOLOv11 实战案例与优化方案，内容目前已覆盖 分类、检测、分割、追踪、关键点、OBB 检测 等多个方向。

**My Coding Family** 1211

js图片加载 完成之前显示loading中的图片

<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:left;width:200px;height:200px;margin:0 10px 10px 0} </style> <script> //判断浏览器...

一只快乐的小猴子的博客 1万+

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正

在页面加载前先出现加载loading，页面加载完成之后再显示页面

在此加入一个关于页面加载成功之前先展现一个loading的案例： 如下代码写入js里放在html头部即可实现需求：添加的可以自己在css文件设置宽高，也可以放入一个background的gif的loading图片 //在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = '页面加载中，请等待...'; //呈现loading效果 ...

weixin_30399155的博客 1万+

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能：商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传，基本资料下载，开钱箱、小票打印、收款结算，支持多币种付款方式（现金、储值卡、礼券、微信等）,支持多种促销。运行环境：.net 4.0登陆信息用户名:1001 密码:123456内置商品信息，商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明，包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

【Vue】图片加载中显示Loading

问题 加载图片列表式，渲染缓慢，影响体验 解决 图片加载完成前显示loading，图片加载错误显示错误图片 <template> <view> < :src="url"></img> </view> </template> <script> export default { name: 'myImage', props: { src: { type: String, }, },

Maria028的博客 4906

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

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

这次给大家带来vue图片加载完成前增加loading效果，vue图片加载完成前增加loading效果的注意事项有哪些，下面就是实战案例，一起来看一下。 如下所示： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18...

hahahhahahahha123456的博客 9519

js实现图片加载中效果 loading

关于loading加载的2个插件。 jQuery.lazyload Echo.js 这两个插件功能都满足不了需求，我们这里只是因为图片加载比较慢，需要一个转圈而已，并不是需要懒加载。 而且，这两个插件也无法设置图片加载后的显示。 自己写一个 原理： img标签不使用src进行资源加载。 使用 Image对象获取img标签上的src-data属性，进行加载，判断加载完成后回显。 ...

一个吃水不忘挖井人的博客。希望能帮助到你 6378

js实现图片懒加载原理

有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。 为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。...

tomorrownan的博客 12万+

自定义加载（loading）界面

&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;刚接触不久就遇到困难------自定义loading。想和其他获取图片方式一样获取加载界面的图片，结果发现资源还没加载就需要图片，在网上百度了许多，都没有找到正确的方式，通过自己的摸索，终于，，，我成功了。。。 下面介绍一下主要思想： &amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;首先，我们需

爱上游戏开发 3万+

加载gif图片html,JS实现的自定义显示加载等待图片插件(loading.gif)

本文实例讲述了JS实现的自定义显示加载等待图片插件。分享给大家供大家参考，具体如下：在工作中遇到了一个问题 —— 某个业务流程分为几个阶段，每个阶段如果在数据没有显示出来之前就要显示加载图片loading.gif文件，如果有数据了就消失。为此，自己写了一个方法，方便整个工程使用。showhide//创建加载对象var obj = new loadingImg();//显示加载图片function ...

weixin_34352565的博客 2224

js图片加载完成前显示loading

&amp;lt;html&amp;gt; &amp;lt;title&amp;gt;js图片未加载完显示loading效果&amp;lt;/title&amp;gt; &amp;lt;body&amp;gt; &amp;lt;style&amp;gt; img{float:left;width:200px;height:200px;margin:0 10px 10px 0} &amp;lt;/styl

tangyuhui 4270
上一篇： Mysql命令大全
下一篇： 再谈javascript图片预加载技术
点赞 0
评论 0
书签 书签 0
HackProgramer
HackProgramer
博客等级 码龄12年 255粉丝 23原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值