java 图像加载_图像延迟加载

朱雀 2023-02-21 14:25 290阅读 0赞

java 图像加载

Lazy loading images is a practice that's been popular for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. There are plugins for lazy loading images in every JavaScript framework, or you could use [Intersection Observer API][], but it's become such a common practice that there should probably be a browser API to accommodate it...and Chrome is implementing just that. Let's have a look at how the incoming native lazy loading API will work!

延迟加载图像是一种流行的做法，有十年的历史，这是有充分理由的：图像通常是给定网页上下载量最大的，避免卸载从未见过的图像可以节省用户带宽。 在每个JavaScript框架中都有一些用于延迟加载图像的插件，或者您可以使用[Intersection Observer API][] ，但是由于已经成为一种常见的做法，因此可能应该有一个浏览器API来容纳它……而Chrome浏览器正在实现该目的。 让我们看一下传入的本地延迟加载API的工作方式！

This new lazy loading API come down to a simple `loading="lazy"` attribute and value on `img` tags:

这个新的延迟加载API归结为`img`标签上的简单`loading="lazy"`属性和值：

To experiment with this new API, you can add an `onLoad` attribute to the image:

要尝试使用此新API，可以向图像添加`onLoad`属性：

When the user scrolls within range of the image, the download and render is triggered. There are three values for this attribute:

当用户在图像范围内滚动时，将触发下载和渲染。 此属性有三个值：

*  `auto` \- the default behavior for image loading today
    
    `auto` \-当前图像加载的默认行为
 *  `lazy` \- loads the image when it becomes visible based on scroll position
    
    `lazy` \-根据滚动位置在可见时加载图像
 *  `eager` \- loads the image immediately regardless of scroll position
    
    `eager` \-不论滚动位置如何立即加载图像

Have a look at this demo of `loading="lazy"`:

看一下这个`loading="lazy"`演示：

See the Pen [ jOOoLXO][jOOoLXO] by David Walsh ([@darkwing][darkwing]) on [CodePen][].

请参阅[CodePen上][jOOoLXO]的David Walsh( [@darkwing][darkwing] )的Pen [jOOoLXO][CodePen] 。

Adding a native API for an ages old pattern is something I'm excited about -- it reminds me of the MooTools days which triggered the HTML5 revolution of adding what we know we've needed forever. What are your thoughts on this new implementation?

我为一个古老的模式添加本机API感到很兴奋-它使我想起MooTools时代，该时代引发了HTML5革命，即不断添加我们知道的需求。 您对此新实施有何想法？

> 翻译自: [https://davidwalsh.name/loading-lazy][https_davidwalsh.name_loading-lazy]

java 图像加载

[Intersection Observer API]: https://davidwalsh.name/intersection-observers
[jOOoLXO]: https://codepen.io/darkwing/pen/jOOoLXO
[darkwing]: https://codepen.io/darkwing
[CodePen]: https://codepen.io
[https_davidwalsh.name_loading-lazy]: https://davidwalsh.name/loading-lazy