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"属性和值:
<img src="path/to/logo.png" loading="lazy">To experiment with this new API, you can add an onLoad attribute to the image:
要尝试使用此新API,可以向图像添加onLoad属性:
<img src="path/to/logo.png" loading="lazy" onload="alert('Loaded!');">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 by David Walsh (@darkwing) on CodePen.
请参阅CodePen上的David Walsh( @darkwing )的Pen jOOoLXO 。
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
java 图像加载
相关资源:Java在窗口上加载显示GIF动画图像.rar