오프스크린 이미지 지연하기 lazyload

 

Offscreen Images

Overview

Offscreen images are images that appear below the fold. Since users can't see offscreen images when they load a page, there's no reason to download the offscreen images as part of the initial page load. In other words, deferring the load of offscreen images can speed up page load time and time to interactive.

Recommendations

To pass this audit, refactor your pages to only download above-the-fold images during the initial request. Applying this strategy to your JS, HTML, CSS, and other resources can also speed up page load time. See Critical Rendering Path to learn more.

Consider using an IntersectionObserver to intelligently determine when to lazy-load offscreen images. For example, suppose you have some images at the bottom of a very long page. With an IntersectionObserver, you can load the images only when the user has scrolled halfway down the page. See Intersect all the things! for more on this approach.

If you do use an IntersectionObserver, make sure to include the polyfill, because native browser support is limited.

참고 사이트

https://appelsiini.net/projects/lazyload

Vanilla JavaScript Lazy Load Plugin

Basic Usage

By default Lazy Load assumes the URL of the original high resolution image can be found in data-src attribute. You can also include an optional low resolution placeholder in the src attribute.

<img class="lazyload" data-src="img/example.jpg" width="765" height="574"> <img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574">

With the HTML in place you can then initialize the plugin using the factory method. If you do not pass any settings or image elements it will lazyload all images with class lazyload.

lazyload();

If you prefer you can explicitly pass the image elements to the factory. Use this for example if you use different class name.

let images = document.querySelectorAll(".branwdo"); lazyload(images);

If you prefer you can also use the plain old constructor.

let images = document.querySelectorAll(".branwdo"); new LazyLoad(images);

Additional API

To use the additional API you need to assign the plugin instance to a variable.

let lazy = lazyload();

To force loading of all images use loadimages().

lazy->loadImages();

To destroy the plugin and stop lazyloading use destroy().

lazy->destroy();

Note that destroy() does not load the out of viewport images. If you also want to load the images use loadAndDestroy().

lazy->loadAndDestroy();

Additional API is not avalaible with the jQuery wrapper.

jQuery Wrapper

If you use jQuery there is a wrapper which you can use with the familiar old syntax. Note that to provide BC it uses data-original by default. This should be a drop in replacement for the previous version of the plugin.

<img class="lazyload" data-original="img/example.jpg" width="765" height="574"> <img class="lazyload" src="img/example-thumb.jpg" data-original="img/example.jpg" width="765" height="574">$("img.lazyload").lazyload();

Cookbook

Blur Up Images

Low resolution placeholder ie. the "blur up" technique. You can see this in action in this blog entry. Scroll down to see blur up images.

<img class="lazyload" src="thumbnail.jpg" data-src="original.jpg" width="1024" height="768" /><div class="lazyload" style="background-image: url('thumbnail.jpg')" data-src="original.jpg" />

Responsive Images

Lazyloaded Responsive images are supported via data-srcset. If browser does not support srcset and there is no polyfill the image from data-srcwill be shown.

<img class="lazyload" src="thumbnail.jpg" data-src="large.jpg" data-srcset="small.jpg 480w, medium.jpg 640w, large.jpg 1024w" width="1024" height="768" /><img class="lazyload" src="thumbnail.jpg" data-src="normal.jpg" data-srcset="normal.jpg 1x, retina.jpg 2x" width="1024" height="768" />

Inlined Placeholder Image

To reduce the amount of request you can use data uri images as the placeholder.

<img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="original.jpg" width="1024" height="768" />