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

柔光的暖阳◎ 2023-02-22 03:38 34阅读 0赞

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

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][] [观看演示][View Demo]

## HTML **(**The HTML**)** ##

We'll start by putting together the image tag with specifics:

我们将首先将image标签与具体细节放在一起：

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。 对于后备解决方案，您可以执行以下操作：

[].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][] [观看演示][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][https_davidwalsh.name_lazyload-image-fade]

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

[View Demo]: https://davidwalsh.name/demo/lazyload-image-fade.php
[https_davidwalsh.name_lazyload-image-fade]: https://davidwalsh.name/lazyload-image-fade