Js enables delayed loading of webpage images to increase webpage opening speed and js latency

Js enables delayed loading of webpage images to increase webpage opening speed and js latency

There are many ways to increase the speed of webpage loading, using jquery. lazyload. js achieves asynchronous and delayed loading of images. For websites with a large number of images on the page, it is a good way to increase the speed of webpage opening. On the left side of the bar page of the Code official website, you can see an article thumbnail display module during PC preview, which will prolong the webpage loading time to a certain extent. This article uses asynchronous and delayed loading of images to speed up page loading on this site.

Asynchronous image loading means that you do not need to load and display all the images on the page at a time. Only when you slide the scroll bar to a certain position will the image at the corresponding position be loaded, this improves the webpage loading speed and user experience.

There are a lot of technical articles with a lot of images. If you need to load all the images at a time when you open the web page, the user's waiting time must be very long. This will make the user experience very bad, and there is no need to load all the images on the page at a time. Asynchronous and delayed loading of images is the most reasonable and appropriate method in web design.

We use jquery. lazyload. js to Implement Asynchronous and delayed image loading. Remember to load jQuery first.

1. Import JS plug-ins:

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

2. Insert JavaScript code into the page:

$ (Document ). ready (function ($) {$ ("img "). lazyload ({placeholder: "grey.gif", // attach the placeholder image before the image effect: "fadeIn" // load the image effect (fade in )});});

Through the above two steps, we can easily implement asynchronous and delayed loading of web images.

For more information, see:
Sometimes we see some large websites. If there are many images on the page, When you scroll to the corresponding row, the current row of images will be loaded instantly, in this way, only images in the visible area are displayed on the page, while other hidden images are not loaded, which speeds up page loading in certain programs. For long pages, this solution is better.

Recommended:Use the jquery image delay loading plug-in jquery. lazyload to implement image Delay

Implementation principle:

Change all images that require delayed loading to the following format:

Then, when loading the page, save all images that use lazy_src to the array, and calculate the top of the visible area during scrolling, then, use lazy_src to replace the src value of the top image smaller than the current visible area (that is, the image appears in the visible area) in the delayed loading image (loading the image ):

JS Code:

LazyLoad = (function () {var map_element = {}; var element_obj = []; var download_count = 0; var last_offset =-1; var doc_body; var doc_element; var lazy_load_tag; function initVar (tags) {doc_body = document. body; doc_element = document. compatMode = 'backcomput '? Doc_body: document.doc umentElement; lazy_load_tag = tags | ["img", "iframe"] ;}; function initElementMap () {var all_element = []; // find the element for delayed loading from all related elements (var I = 0, len = lazy_load_tag.length; I <len; I ++) {var el = document. getElementsByTagName (lazy_load_tag [I]); for (var j = 0, len2 = el. length; j <len2; j ++) {if (typeof (el [j]) = "object" & el [j]. getAttribute ("lazy_src") {element _ Obj. push (all_element [key]) ;}}for (var I = 0, len = element_obj.length; I <len; I ++) {var o_img = element_obj [I]; var t_index = getAbsoluteTop (o_img); // obtain the distance from the image to the document if (map_element [t_index]) {map_element [t_index]. push (I);} else {// save a queue var t_array = []; t_array [0] = I; map_element [t_index] = t_array; download_count ++; // number of images to be loaded in a delayed manner }}; function initDownloadListen () {if (! Download_count) return; var offset = (window. MessageEvent &&! Document. getBoxObjectFor )? Export: doc_element.scrollTop; // The offtset of the visualization area = the height of the document + var visio_offset = offset + offset; if (last_offset = visio_offset) {setTimeout (initDownloadListen, 200); return ;} last_offset = visio_offset; var visio_height = doc_element.clientHeight; var img_show_height = visio_height + offset; for (var key in map_element) {if (img_show_height> key) {var t_o = map _ Element [key]; var img_vl = t_o.length; for (var l = 0; l 
Usage:Change the src image to lazy_src for delayed loading on the page, put the above js to the end of the body, and then call: lazyLoad. init ();
You can use firebug to check whether an image is loaded at a delay.
In addition:
If a topic for Content Switching exists on your page, the images in the switched content may not be displayed during the switching. The processing method is to load and process the image separately when the content is being switched, for example:

/// Code for switching content... Chlid. find ("img [init_src]"). each (function () {$ (this ). attr ("src", $ (this ). attr ("init_src"); $ (this ). removeAttr ("init_src ");});
The so-calledAsynchronous image loadingIt means that you do not need to load all the images at a time. You can call it to delay loading and buffer loading.
See if you have such a requirement: There are a lot of images in an article. If you load all the images when loading the article, it will undoubtedly delay the loading speed and allow users to wait longer, I want to find a plug-in that allows a webpage to only load images in the browser's field of view. images that do not appear in the current range will not be loaded at the moment, and will be loaded gradually when the user slides the scroll bar, lazyload is used to achieve this effect.
Lazyload. js is actually a plug-in of jQuery. Its full name is jquery. lazyload. js. You can see its role by looking at its name-that is, the meaning of lazy loading. Because it is written in javascript, it applies to all webpages, including Wordpress.
To use lazyload, you must first load jQuery, which relies on jQuery to achieve the effect.
The above is all the content in this article. I hope you will have a better understanding of how to implement webpage image loading latency in js.
Articles you may be interested in:

 

 
  
A piece of js Code that achieves delayed loading of images on the page
 
  
Js Code for webpage image loading with delay
 
  
Sample Code for loading JS images by mouse scroll Delay
 
  
How to Implement delayed loading of iframe framework using javascript
 
  
Native javaScript Implementation of image delayed Loading Method
 
  
Native javascript For image scrolling and delayed Loading
 
  
Implementation of image delay loading using pure javascript