| 标题 | JS实现图片延迟加载并淡入淡出效果的简单方法 |
| 内容 | 我们大家都知道，对于一个网站最占用带宽，最影响页面显示速度的东西就是图片。图片是很重要的，作为一个站长我们是千方百计的使用各种技巧来优化图片，但其实有一种简单的方法，只需要几行代码就能达到这种效果。同时还附加一种淡入淡出的显示效果，下面一起来看看。 话不多说，直接看示例 首先是图片标记的写法: <img data-src="/images/image.jpg"> 需要将图片的地址放到 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'); }; }); 相比起其它各种的图片延迟加载技术，这种方法非常的简单，它几乎不要求其它任何条件，可以用在任何地方，使用起来非常灵活。 但是要注意的是，简单有简单的好坏，也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术，还是要看场景而定。 以上就是本文的全部内容，希望对大家的工作和学习能有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。