安卓手机加载淡入淡出效果_简单图像延迟加载和淡入淡出

安卓手机加载淡入淡出效果

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以及延迟加载图像。 当您懒惰地加载图像时，它们有点无聊，它们只是从无处出现，这就是为什么我喜欢沿途褪色的原因。 如果您没有显式设置图像尺寸，则页面仍然会打乱，但是淡入确实提供了一点点的类。 我已经看到许多解决方案可以做到这一点(有些方法不是很好，就像我的旧方法一样)，所以我想我会分享当前的实现。

View Demo 观看演示

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');
});

View Demo 观看演示

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框架中的插件或独立组件来完成的。 但是，如果您正在寻找一个简单的解决方案，就是这样！

翻译自: https://davidwalsh.name/lazyload-image-fade

安卓手机加载淡入淡出效果