How images are loaded on demand

What is "image loading on demand" (hereinafter referred to as image loading )? In fact, the meaning of the word is: load these images as needed! Then the question comes again:

Why do we need to load images as needed?

Images on the website can add a lot of "Colors" to the website, but a large number of images will speed up opening, but we have to use these images, we can attach these images in disguise, such as list pages, big data homepages, or pages that are "All graphs". Therefore, loading these images is important, for example, jd and taobao are all used, so you are not alone!

By loading images as needed, the data display can greatly increase the website opening speed!

The process of loading images as needed

1. First, we need to change the HTML structure of these imagessrcReplace it with a "1*1" transparent GIF image (do not say you won't do this), and then write the real path of the image to a placeholder attribute in the Image Tag, such:Data-src = "image path"This step ensures that only one small graph is loaded for each image during page loading to ensure the opening speed, because the actual path is notsrcAttribute, here remember,srcCannot be blank!

2. Use js to determine the position of the image andwindowBindscroll,resizeEvent. If the image is visible, the actual placeholder value is replaced withsrcAnd delete the placeholder attribute,

Var fn = function () {$ ("# id img "). each (function () {// traverse all images var othis = $ (this), // The current image object top = othis. offset (). top-$ (window ). scrollTop (); // calculate the image top-scroll bar top if (top >$ (window ). height () {// if the image is invisible return; // No matter} else {othis. attr ('src', othis. attr ('data-src ')). removeAttr ('data-src'); // when visible, replace the placeholder value and delete the placeholder attribute});} fn (); $ window. scroll (fn ). resize (fn); // bind an event

　　

The above code is taken from the eight-circle package, but it is not the source of the Eight-circle package because you have thoroughly changed the source code...

3. In fact, you are now OK, but you will find some areas that can be optimized, such as: js code optimization, because a large number of executionsscrollThe event is a pretty cool thing. You have to cache + delay and give a loading to images during loading. No problem, you can use css to write a GIF image of the loading background for this img;

Img. load {background: url ('/images/loading.gif') no-repeat center;}/* loading effect when loading */

4, that$("#id img")Is the image selector. You can addclassAnd then use$("img.loadImg")And so on. This makes it easier to add images that require delayed loading;

Note: When you are familiar with these games, you should write them as plug-ins. In addition, this judgment picture is only a simple judgment, if you press the keyboard end key or the user opens it on the smallest surface when loading, all your images will be loaded, to solve this problem, you only need to deepen the judgment when judging the visibility. The Code is as follows:

If ($ (window ). scrollTop () + $ (window ). height ()> = ($ (this ). offset (). top) & ($ (this ). offset (). top + $ (this ). height () >=$ (window ). scrollTop () {// advanced visibility}

Does it affect SEO?

There is no effect, but it should be noted that Baidu has already begun to capture a large number of page images. We recommend that you do not load the first image of the product/product on demand during the details page, this loading may not be captured by the search engine;

A common problem of online plug-ins

There are a lot of images loaded on the Internet, but many do not provide clear steps to change the HTML code, just use js operations. After viewing the source code, we found that, they all store the true paths of images in js ,:

However, after checking through the console network, all the images that have been requested before your js execution have not been optimized!

Click to view a loaded demo.