Lazy Load (1.7.0) Chinese Document-jQuery plug-in for delayed image loading

It seems that I have been doing "Reading Comprehension" recently ~

Reading a document by yourself does not waste a lot of time, but you need to know more about it in your own language.

Therefore, we often spend time researching plug-in code so that we can learn more about the author's intentions and turn it into our own text.

After all, Lazy Load is no longer a new plug-in, so there are a lot of Chinese documents on the Internet. However, Lazy Load has been updated a lot some time ago.

The Lazy Load plug-in is not large, and there are not enough 200 lines of code. If you want to spend some time looking at it, you don't need to check the documentation.

However, most people still want to get the tool and use it directly, rather than studying how to make it. Therefore, there is still a need for the manual.

In addition, this article also adds some attributes not described in the original text.

 

Original article links in: http://www.appelsiini.net/projects/lazyload

The Lazy Load version is 1.7.0.

: Full https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js,

Compressed version https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

 

Next, go to the topic.

 

Lazy Load is easy to use, but the new version has made some adjustments and must modify the attributes of the label.

Change the src attribute in the label to the URL of the image waiting for, and enter the real image URL in the data-original attribute.

As follows:
[Html]

suggestion: it is best to use a 1 pixel monochrome image in src.

The JS Code is as follows:

[Javascript]
$ ("Img. lazy"). lazyload ();
$ ("Img. lazy"). lazyload (); this will achieve the Lazy Load effect. Demo
After watching the Demo, do you think it will be ineffective?

This issue will be mentioned later.

 

In fact, it is not necessary to use the specified data-original attribute to store image URLs.

You can also customize other property names as follows:

 

[Html]

The JS Code is as follows:

[Javascript]
$ ("Img. lazy"). lazyload ({data_attribute: "attr "});
$ ("Img. lazy"). lazyload ({data_attribute: "attr "});
You only need to set the data_attribute to the corresponding name.
Note: html code is case-insensitive! Therefore, "data-" can only be followed by lower-case letters or numbers.

 

 

Browsers that do not support JavaScript should be downgraded accordingly.

You can use the <noscript> label to define the alternative content/text when the script is not executed.

In addition, the search engine crawlers do not process JavaScript scripts, so they can directly capture the content in the <noscript> tag.

 

[Html]

<Noscript> </noscript>

<Noscript> </noscript> CSS style setting: [css]
. Lazy {
Display: none;
}
. Lazy {
Display: none;
} JS Code:
[Javascript]
$ ("Img. lazy"). show (). lazyload ();
$ ("Img. lazy"). show (). lazyload ();

 

 

 

Set the response distance for image loading

The default setting of the Lazy Load plug-in is: if an image appears in the browser window, the loading will be triggered.

However, by setting the value of the threshold attribute, you can adjust the pre-loading position/distance of the image.

 

[Javascript]
$ ("Img. lazy"). lazyload ({threshold: 200 });
$ ("Img. lazy"). lazyload ({threshold: 200 });

 

In addition, threshold can be a positive number or a negative number.
Positive numbers are pre-loaded. If the value is 200, the image starts to load when the image is PX away from the screen.

If it is a negative number, it is the opposite. If the value is-200, the image is already displayed in the window, and the distance from the bottom of the browser window is 200px.

PS: the distance between the image and the screen is calculated based on the top position of the image.

Note: The threshold setting must take into account the length of the website and the Image Height. If the value is too large, loading may fail. We recommend that you set the value not to exceed half of the height of the corresponding image.

 

 

Event-triggered Loading

Events defined by jQuery can be used to trigger loading or custom events.

 

[Javascript]
$ ("Img. lazy"). lazyload ({
Event: "click"
});
$ ("Img. lazy"). lazyload ({
Event: "click"
});

 

 

Animation Effect

The reason why the above Demo does not have the effect of image loading is that Lazy Load's default image loading is displayed through the jQuery show () method, so the image appears almost instantly.

Of course, we can achieve other effects.

 

[Javascript]
$ ("Img. lazy"). lazyload ({
Effect: "fadeIn"
});
$ ("Img. lazy"). lazyload ({
Effect: "fadeIn"
});

Demo

You can also use the slideDown () method, but the effect is not good.
If you want to control the animation speed, you can also modify the effectspeed attribute.

 

[Javascript]
$ ("Img. lazy"). lazyload ({
Effect: "fadeIn ",
Effectspeed: 1000
});
$ ("Img. lazy"). lazyload ({
Effect: "fadeIn ",
Effectspeed: 1000
}); The effectspeed attribute is empty by default, so if you do not set it, the animation time is 400 milliseconds.

 

 

Container

When the images to be loaded are all placed in a container.

You only need to point the container property to the object of the container where the img is placed.

Css code:

 

[Css]
# Container {
Height: 600px;
Overflow: scroll;
}
# Container {
Height: 600px;
Overflow: scroll;
}
Js Code:

 

[Javascript]
$ ("Img. lazy"). lazyload ({
Container: $ ("# container ")
});
$ ("Img. lazy"). lazyload ({
Container: $ ("# container ")
}). You don't need to talk nonsense. You can directly look at the Demo. It's not just a vertical one, but also a horizontal Demo.

 

 

 

When Images Are Not Sequential (When the image is Not displayed in a browser window in an orderly manner)

Original article: After scrolling page Lazy Load loops though unloaded images. in loop it checks if image has become visible. by default loop is stopped when first image below the fold (not visible) is found. this is based on following assumption. order of images on page is same as order of images in HTML code. with some layouts assumption this might be wrong. you can control loading behaviour with failure_limit option.

How to read this article is hard to understand. After some online searches, I finally understood it.

 

 

Lazy Load has a mechanism to search for img cyclically. search from top to bottom based on the HTML document layout. When the first img that is not displayed/loaded is found, the search will stop. (In fact, it is for $ ("img. lazy ") This object (group) for sequential search)

What is the use of the failure_limit attribute?

Currently, a large number of positioning styles, such as float and position, are used in website design. The layout effect displayed in the browser is significantly different from the DOM sequence in HTML documents.

In this case, a label is displayed on the screen but cannot be displayed !!

Because it is placed behind the labels that are not displayed in the HTML document, the label displayed on the screen cannot be loaded.

When Lazy Load finds the first undisplayed label, the search has been terminated and does not continue to traverse.

Therefore, you can use the failure_limit attribute.

 

[Javascript]
$ ("Img. lazy"). lazyload ({
Failure_limit: 10
});
$ ("Img. lazy"). lazyload ({
Failure_limit: 10
});
In this way, Lazy Load finds 10th undisplayed labels.

When there are many images and complex pages, failure_limit is very useful.

The original Article also prompts: If you have a funky layout set this number to something high. If your website layout is "abnormal", we recommend that you set this value to a higher value.

 

 

 

Delayed image download

 

You can use custom events and setTimeout to set the latency to trigger this event.

[Javascript]
$ (Function (){
$ ("Img: below-the-fold"). lazyload ({
Event: "sporty"
});
});
 
$ (Window). bind ("load", function (){
Var timeout = setTimeout (function () {$ ("img. lazy"). trigger ("sporty")}, 5000 );
});
$ (Function (){
$ ("Img: below-the-fold"). lazyload ({
Event: "sporty"
});
});

$ (Window). bind ("load", function (){
Var timeout = setTimeout (function () {$ ("img. lazy"). trigger ("sporty")}, 5000 );
});
When an event is set to an event other than scroll, a built-in "appear" event is actually bound.

As the name suggests, this event is used to display images. (In fact, scroll also calls this event)

 

 

 

Load invisible Images

 

 

By default, the Lazy Load plug-in does not Load hidden images (for example, display: none). This helps to optimize the performance.

If you want to attach a hidden image together, set skip_invisible to false.

 

[Javascript]
$ ("Img. lazy"). lazyload ({
Skip_invisible: false
});
$ ("Img. lazy"). lazyload ({
Skip_invisible: false
});

 

Plugin has been tested with Safari 5.1, Firefox 3.6, Firefox 7.0, Firefox 8.0 on OSX and Firefox 3.0, Chrome 14 and IE 8 on Windows and Safari 5.1 on iOS 5 both iPhone and iPad.

 

 

In fact, version 1.7.0 has some new features. You can try again later.

Excerpt from jian sheng's code Memorandum