JS实现图片延迟加载并淡入淡出效果的简单方法

作者:daisy 时间:2023-07-02 05:19:14 

话不多说,直接看示例

首先是图片标记的写法


<img data-src="/images/image.jpg" alt="">

需要将图片的地址放到 data-src 属性里,而src值不需要,直接将src属性去掉。

CSS代码

所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节:


img {
opacity: 1;
transition: opacity 0.3s;
}

img[data-src] {
opacity: 0;
}

这样写的作用是什么?等当图片加载时,你就能看的效果了。

JavaScript代码

我们最终会将 data-src 属性去掉,换成src属性,但这是图片加载成功后的动作:


[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});

相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。

但是要注意的是,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。

标签:js,图片,延迟加载,淡入淡出
0
投稿

猜你喜欢

  • python将人民币转换大写的脚本代码

    2021-03-05 17:36:23
  • php数组中删除元素之重新索引的方法

    2024-05-22 10:07:18
  • python使用pil生成图片验证码的方法

    2022-03-08 18:39:24
  • 培养色感的一些经验分享

    2013-11-10 03:47:03
  • JavaScript正则表达式之multiline属性的应用

    2024-05-11 10:24:56
  • vue 过滤、模糊查询及计算属性 computed详解

    2024-05-09 09:53:30
  • javascript+css实现俄罗斯方块小游戏

    2024-04-23 09:28:06
  • update.where无索引导致MySQL死锁问题解决

    2024-01-28 01:21:25
  • 详解如何在Javascript中使用Object.freeze()

    2024-04-10 16:10:17
  • 在 Python 中进行 One-Hot 编码

    2023-04-06 06:02:55
  • ASP使用xmlhttp定时触发事件

    2008-08-19 18:09:00
  • PyCharm中鼠标悬停在函数上时显示函数和帮助的解决方法

    2023-08-10 19:20:02
  • python爬虫 requests-html的使用

    2023-05-08 02:41:16
  • HTML+JavaScript实现扫雷小游戏

    2024-04-17 10:03:58
  • 用VB编写ActiveX DLL实现ASP编程

    2008-10-21 21:28:00
  • Python地图四色原理的遗传算法着色实现

    2022-10-07 20:57:45
  • JS中如何实现点击a标签返回页面顶部的问题

    2024-04-19 10:14:19
  • python3 pillow模块实现简单验证码

    2021-07-04 11:10:44
  • Python中异常处理用法

    2021-03-28 23:10:24
  • ASP.NET MVC把数据库中枚举项的数字转换成文字

    2024-01-16 07:35:39
  • asp之家 网络编程 m.aspxhome.com