Example of jquery scrollLoading for delayed image loading

One: About picture delay loading

Often encounter a lot of loading pictures of a page, the user will wait for a long time, all in the picture loading, the user experience is very bad, the solution is to use the picture delay loading, only display the picture inside the screen, the screen does not load, only the picture of the area into the browser visual window, That triggers the loading of the picture and shows that there are two benefits to it, 1: Increasing the load speed of the page; 2: Saving traffic.

Two: The realization method

1: Introduce jquery library files on the page

<script type= "Text/javascript" src= "/js/jquery/jquery-1.8.3.min.js?ver=1.11.0" ></script>

2: The image's address and style name settings

Set the picture to defer loading to the following format:

SRC: is the picture's default loading picture
Data-url: is the actual address of the picture
Class: Identifies the style name of the deferred load picture

Introduce scrollloading files and perform deferred loading on the footer of the page:

scrollloading Download Address:

/minty/js/jquery.scrollloading.js

　
<script type= "Text/javascript" src= "/wp-content/themes/minty/js/jquery.scrollloading.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (". Img-lazyload"). Scrollloading ();
});
</script>

The browser presses the shortcut key F12, the scrolling page can see the console one picture dynamic loading.