Menu
In June Chrome added support of the loading attribute, but it does not work for me. Image is loading when it's not in viewport.
My network info in DevTools
User-agent: Chrome/75.0.3770.80
Enabled lazy image loading in chrome://flags
My test page:
<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<p style="margin-bottom: 1000px;">Way to go…</p>
<h4>Lazy cat loaded lazily</h4>
<p>If your browser supports native lazy-loading, it loads the first 2 kB of the image in order to display a
placeholder. Then, it loads the full-size image.</p>
<p>If your browser does not support native lazy-loading, it loads the lazysizes library and sets the
<code>img</code>'s <code>src</code> to a low-quality image placeholder, which is also around 2 kB in size. Then,
it loads the full-size image.</p>
<div class="alert alert-warning">The native lazy-loading's 2 kB range request do not work from within Codepen.
However, you can make this work by copying this to an empty HTML file on your computer.</div>
<!-- <img src="https://demo.tiny.pictures/native-lazy-loading/lazy-cat.jpg?width=500"
loading="lazy" alt="Lazy cat loaded lazily"> -->
<img src="images/article/photo.jpg" loading="lazy" alt="Lazy turtle">
<script>
if ('loading' in HTMLImageElement.prototype) {
console.log('YES');
} else {
console.log('NO');
}
</script>
Can you tell me, am i doing something wrong or this attribute is raw and not working?
288
In Chrome 76 onwards, you can use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library.
To disable them, hit the drop-down arrow, adjacent to the features described and choose 'Disabled' option. In the end, restart Google Chrome by closing it manually or hit the Relaunch button to restart the browser and allow changes to take effect. Likewise, switch to 'Enabled' to enable the Lazy Loading, again.
You should always use lazy loading for the images below the fold. As we explained, lazy loading will reduce the real and perceived loading time. User experience will benefit from it — and you users will thank you.
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
