安卓手机加载淡入淡出效果
One of the quickest and easiest website performance optimizations is decreasing image loading. That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images. It's a bit jarring when you're lazy loading images and they just appear out of nowhere which is why I love the fading in route. The page still shuffles if you aren't explicitly setting image dimensions but the fade in does provide a tiny bit of class. I've seen many solutions which accomplish this (some not very good, like my old method) so I thought I'd share my current implementation.
最快,最简单的网站性能优化之一是减少图像加载。 这意味着很多事情,包括使用ImageOptim和TinyPNG之类的工具缩小图像,使用数据URI和Sprite以及延迟加载图像。 当您懒惰地加载图像时,它们有点无聊,它们只是从无处出现,这就是为什么我喜欢沿途褪色的原因。 如果您没有显式设置图像尺寸,则页面仍然会打乱,但是淡入确实提供了一点点的类。 我已经看到许多解决方案可以做到这一点(有些方法不是很好,就像我的旧方法一样),所以我想我会分享当前的实现。
HTML (The HTML)
We'll start by putting together the image tag with specifics:
我们将首先将image标签与具体细节放在一起:
<img data-src="/path/to/image.jpg" alt="">
Use data-src
to represent the eventual URL.
使用data-src
表示最终的URL。
CSS (The CSS)
Any image with a data-src
attribute should start as invisible and eventually transition the opacity:
具有data-src
属性的任何图像均应以不可见开始,并最终转变为不透明性:
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}
You can probably guess at this point what we'll be doing with that attribute when an image loads...
您可能会猜到这一点,当图像加载时,我们将如何处理该属性...
JavaScript (The JavaScript)
...which is removing the data-src
attribute when the image has loaded:
...这将在加载图像后删除data-src
属性:
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});
This solution does require JavaScript as a few of you have pointed out. For a fallback solution you could do this:
正如您所指出的那样,此解决方案确实需要JavaScript。 对于后备解决方案,您可以执行以下操作:
<noscript data-src="/path/to/image.jpg">
<img src="/path/to/image.jpg" data-src="" alt="">
</noscript>
[].forEach.call(document.querySelectorAll('noscript'), function(noscript) {
var img = new Image();
img.setAttribute('data-src', '');
img.parentNode.insertBefore(img, noscript);
img.onload = function() {
img.removeAttribute('data-src');
};
img.src = noscript.getAttribute('data-src');
});
This is a super basic tutorial but considering I've seen so many other solutions, I thought I'd share what I've implemented; it works under every scenario I've tested, including History changes via AJAX (like my site does).
这是一个超级基础的教程,但是考虑到我看过许多其他解决方案,我想分享一下我已经实现的内容。 它适用于我测试过的每种情况,包括通过AJAX进行的历史记录更改(就像我的网站一样)。
Of course this doesn't take into account true scroll-based lazy load but that's generally done by a plugin in your favorite JavaScript framework or a standalone component. If you're looking for a simple solution, however, this is it!
当然,这没有考虑真正的基于滚动的延迟加载,但是通常是通过您喜欢JavaScript框架中的插件或独立组件来完成的。 但是,如果您正在寻找一个简单的解决方案,就是这样!
安卓手机加载淡入淡出效果