[jQuery] How to use Lazy Load

 

---

 Usually, the load on the screen is often longer because once a webpage is floated, it fetches all the content within the page.

 Therefore, even if it is not the screen that the user wants to see (if you simply click on the menu on that page to go to another page, or if you want to click on the content on the current screen without scrolling down), it is often traffic-related because you have to send content that the user does not see. This is especially important for mobile, which needs to be provided at a lower capacity than the web.

 Image accounts for the largest portion of this image, and LazyLoad is one of the ways to reduce the traffic volume of this image.
 This is one of the techniques that requires the image to be imported from the server only if it is currently exposed to the screen.

 Since it is basically a plug-in for jQuery, jQuery must be predefined.

 

Features : LazyLoad

Content  : Technology to reduce load by allowing only scrolled areas to load images

 

---

How to use

1. Import

<script src="jquery.lazy.min.js" type="text/javascript"></script>

http://jquery.eisbehr.de/lazy/

Delayed Content, Image and Background Lazy Loader

 

2. Targeting

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

 

3. Apply jQuery

 $(function() {
    $('.lazy').Lazy();
});

OPTION	DESCRIPTION	EXAMPLE
thresold	The image is displayed from the time when the image is loaded with more than 100 pixels.	thresold:100
placeholder	If the image is loading, it shows that image.	placeholder:'IMAGE PATH'
effect	Apply the effect to be used when the image is shown.	effect:'fadeIn'
onError	Process the event if an error occurs while fetching the image	onError:function(ele){}

$('.lazy').Lazy({
    // your configuration goes here
    thresold : 100,
    placeholder : '이미지경로',
    effect: 'fadeIn',
    onError: function(element) {
        console.log('error loading ' + element.data('src'));
    }
});

---

Reference Site

http://jquery.eisbehr.de/lazy/

Delayed Content, Image and Background Lazy Loader

---

[jQuery] Lazy Load 사용하기

🇰🇷 Korean

2020.07.23 - [개발 창고/Web] - [jQuery] Lazy Load 사용하기

[jQuery] Lazy Load 사용하기