网页图片加载loading效果实现

简介:

网页加载图片时通常用背景图来显示,这样能确保图片不被拉伸变形。这个时候就需要用到img标签的onload函数来确认图片已经下载成功。实现方法如下:
1、把图片地址绑定到目标元素身上


url即为图片地址,src为div属性
2、用js获取src属性后,new Image();出一个图片,并赋值src地址
var img = new Image();
img.src='';
3、通过onload的函数来判断下载是否完成
img.onload = function () {
                target.style.backgroundImage = `url('${url}')`;
                that.isLoad = true;
            };

完成后 将图片地址赋给目标元素设为背景图即可;
ps:图片只会下载一次

相关文章
|
人工智能 JavaScript 前端开发
从零开始,国内实现调用Open Ai
从零开始,国内实现调用Open Ai
2060 0
如何在 Umi 中使用 Keep Alive
如何在 Umi 中使用 Keep Alive
4995 1
如何在 Umi 中使用 Keep Alive
|
机器学习/深度学习 运维 监控
智能化运维:从自动化到AIOps的演进之路####
本文深入探讨了IT运维领域如何由传统手工操作逐步迈向高度自动化,并进一步向智能化运维(AIOps)转型的过程。不同于常规摘要仅概述内容要点,本摘要将直接引入一个核心观点:随着云计算、大数据及人工智能技术的飞速发展,智能化运维已成为提升企业IT系统稳定性与效率的关键驱动力。文章详细阐述了自动化工具的应用现状、面临的挑战以及AIOps如何通过预测性分析和智能决策支持,实现运维工作的质变,引领读者思考未来运维模式的发展趋势。 ####
|
前端开发
css_字体混合正片叠底与发光
css_字体混合正片叠底与发光
225 0
css_字体混合正片叠底与发光
|
存储 SQL 关系型数据库
StarRocks简介
【5月更文挑战第4天】StarRocks是Linux基金会的开源MPP数据库,提供MySQL协议兼容性,支持标准SQL,用于快速数据分析。它适用于OLAP、实时数仓、高并发查询等场景,具有无外部依赖、高可用和易运维的特点。StarRocks支持多种BI工具,如Tableau,且可构建各种数据模型。其系统架构包括Frontend(FE)和Backend(BE),提供存算一体和存算分离两种模式。此外,StarRocks支持四种表类型和多种数据类型,满足不同业务需求。
3111 0
StarRocks简介
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力?带你彻底理解粘性定位的奇妙世界!
【8月更文挑战第20天】在前端开发中,CSS的粘性定位(`position: sticky`)是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位,达到指定阈值时转为固定定位,非常适合制作“吸顶”导航栏等。例如,设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏,还可应用于侧边栏等,增强布局灵活性与用户体验。尽管如此,仍需注意不同浏览器间的兼容性和可能的布局冲突。
727 0
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
257 0
|
Prometheus Cloud Native 测试技术
性能测试--grafana 里配置 prometheus
性能测试--grafana 里配置 prometheus