Mobile Image Lazy Loading plugin

LAZYLOADIMG Introduction

Lazyloadimg Lightweight mobile-side image Lazy Loading plugin
Native JS Development, independent of any frame or library
supports a wide range of images that are inconsistent in width and height, automatically cut to the width of the default image. For example, your default image is a square picture, a variety of different width height of the picture, automatically cut into squares.
Perfect solution to the mobile development, the user upload image width and height inconsistency caused by the picture distortion problem.
Simple API, let you get started in minutes!!!

Quick Start

var lazyloadimg =New Lazyloadimg ({el:' #ul [data-src] ',Match element Top:40Melement at the top extends the length of the trigger loading mechanism right:40MThe element extends the length on the right to trigger the loading mechanism bottom:The  //element extends the length at the bottom to trigger the loading mechanism left: the  //element extends the length of the side to trigger the loading mechanism qriginal: false, //True, automatically cut the picture into the default image of the width of the height False to show picture true width and height load: function(EL) { ////Picture after loading succeeded callback method, pass in a parameter El.style.cssText + = '-webkit-animation: FadeIn 01s ease 0.2s 1 both;animation:fadein 1s ease 0.2s 1 both; '; }, Error: function(EL) { //The callback method executed after the picture failed to load}});  End picture Lazy Load Event listener: Lazyloadimg.end (); //Start picture lazy Load Event listener: Lazyloadimg.start ();              

Lazyloadimg makes the rear senseWarm Tips

Note: It is important to add a width to the picture, otherwise the picture will not be displayed, which is a good solution for mobile, as we can use percentages to add width to the image.

Perfect

Good things + good things = become good cow things, lazyloadimg+animate.css is a good thing, nothing else. Why do you say, the reason is also very simple, that is, when you use this plugin, you can also cooperate with such as: Animate.css Animation Library to achieve a variety of different display effects, if not set, the default is the fade-in effect. The combination of these two things can make a lot of cool effects. The effect is how to dazzle, this will have to you to slowly study, slowly experience. Here is just a way to let you know that this can achieve some effect.

How to do that, in fact, is very simple, you just need to find in a piece of code above

‘-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;‘;

Where FadeIn is the name of the animation effect, for browser compatibility, so there is a-webkit-prefix and no-webkit-prefix CSS3 style, if you have introduced the Animate.css animation library, Then just replace the fadeIn in the animation library with the name of the animation effect you like. If you are like me a perfectionist, then when you see the Animate.css animation library unexpectedly 71k, you must have been sad not to. So how does this optimize? Also very simple. Animate is ready for you at the beginning of the launch. All you have to do is copy the corresponding effect code from the Animate.css file.

For example, if you want to use the Bounceindown effect, you can copy the code like this:

@-webkit-KeyFrames Bounceindown {From, 60%, 75%, 90%,to {-webkit-animation-timing-function:Cubic-bezier (0.215, 0.610, 0.355, 1.000);Animation-timing-function:Cubic-bezier (0.215, 0.610, 0.355, 1.000); } 0% {Opacity0;-webkit-transform:Translate3d (0, -3000px, 0);TransformTranslate3d (0, -3000px, 0); } 60% {Opacity1;-webkit-transform:Translate3d (0, 25px, 0);TransformTranslate3d (0, 25px, 0); } 75% {-webkit-transform:Translate3d (0, -10px, 0);TransformTranslate3d (0, -10px, 0); } 90% {-webkit-transform:Translate3d (0, 5px, 0);TransformTranslate3d (0, 5px, 0); }to {-webkit-transform:none;Transform:none; }}@KeyFrames Bounceindown {From, 60%, 75%, 90%,to {-webkit-animation-timing-function:Cubic-bezier (0.215, 0.610, 0.355, 1.000);Animation-timing-function:Cubic-bezier (0.215, 0.610, 0.355, 1.000); } 0% {Opacity0;-webkit-transform:Translate3d (0, -3000px, 0);TransformTranslate3d (0, -3000px, 0); } 60% {Opacity1;-webkit-transform:translate3d (0, 25px, 0); transform: translate3d (0, 25px, 0);} 75% {-webkit-transform: translate3d (0, -10px, 0); transform: translate3d (0, -10px, 0);} 90% {-webkit-transform: translate3d (0, 5px, 0); transform: translate3d (0, 5px, 0);} to {-webkit-transform:none; transform:none;} .bounceindown {-webkit-animation-name: Bounceindown; animation-name:bounceindown;}         

Animate usage DevelopmentAnimation necessary Code

If you want to use the animate effect in your own code, then you have to pay attention to it, there is a small hole, if you just copy the corresponding effect code will not be drawn up, this is why? Because you also need to copy a piece of code. Here's an example of how you can get to know and feel the use and movement of animate. As mentioned above, if you just copy this piece of code into your CSS style file, it has no effect, because you also need to copy the following code into your CSS style file.

.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}

So why does the lazyloadimg plug-in mentioned above not need to add this code when using the animate library? Because this line of code that I just said about the lump of stuff

‘-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;‘;

Please take a closer look, the code to the right of the equal sign is not like the following here, very much like!!! This is going to make you understand why?

.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}

This way you can use the animate library to make the most of it.

animation infinite loop necessary code

There is also a pit, that is, what if you want to use the animation loop? In the same way, the code that starts in the Animate.css file below is also placed in your CSS style file.

.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}

Mobile Image Lazy Loading plugin