html图片载入画面时淡入,简单几句JavaScript代码实现图片延迟加载并淡入淡出显示效果...

对于一个网站,最占用带宽,最影响页面显示速度的东西就是图片。图片是很重要的,有时是必须的,作为一个站长,我们是千方百计的使用各种技巧来优化图片,我们可以使用 ImageOptim 或 TinyPNG 来消减图片体积,或用 data URIs 和小图片来提升图片加载速度。如果一个页面上图片太大,或图片太多,无法消减,我们有另外一个方法来提升用户的页面显示体验,那就是延迟加载(lazy load)。之前我们介绍过使用 Lazy Load jQuery 插件。但其实还有一种更简单的方法,只需要几行代码,就能达到这种效果。同时,还附加一种淡入淡出的显示效果。

下面我们先看看演示效果:

观看演示

HTML代码

首先是图片标记的写法:

需要将图片的地址放到 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');

};

});

观看演示

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个比较简单的前端交互效果,可以用JavaScript实现。以下是具体实现的步骤: 1. 在HTML中创建两个按钮,一个用于切换图片,另一个用于重新页面。 ```html <button id="switch-btn">切换图片</button> <button id="reload-btn">重新页面</button> <div id="image-container"> <img src="a1.gif" id="image"> </div> ``` 2. 在CSS中设置图片容器的宽高,并将所有图片的opacity设置为0,使它们不可见。 ```css #image-container { width: 500px; height: 500px; position: relative; } #image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } ``` 3. 在JavaScript中获取按钮和图片元素,并创建一个数组保存所有图片的文件名。 ```javascript const switchBtn = document.getElementById('switch-btn'); const reloadBtn = document.getElementById('reload-btn'); const image = document.getElementById('image'); const imageNames = ['a1.gif', 'a2.gif', 'a3.gif', 'a4.gif', 'a5.gif', 'a6.gif', 'a7.gif', 'a8.gif', 'a9.gif']; let currentIndex = 0; ``` 4. 实现图片切换的功能。当点击切换按钮时,先将当前图片淡出,然后将下一张图片换上,并显示。 ```javascript switchBtn.addEventListener('click', () => { const nextIndex = (currentIndex + 1) % imageNames.length; const nextImage = new Image(); nextImage.src = imageNames[nextIndex]; nextImage.style.opacity = '0'; nextImage.onload = () => { image.style.transition = 'opacity 0.5s'; image.style.opacity = '0'; setTimeout(() => { image.src = nextImage.src; image.style.opacity = '1'; currentIndex = nextIndex; }, 500); } }); ``` 5. 实现重新页面的功能。当点击重新按钮时,直接调用location.reload()方法即可。 ```javascript reloadBtn.addEventListener('click', () => { location.reload(); }); ``` 完成以上步骤后,就可以实现题目要求的效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值