Jquery. lazyload. js achieves delayed image loading-Wordpress images show up with the scroll bar

Seeing that Louis Han's blog had an image that gradually showed up with the scroll bar, it was both gorgeous and resource-saving, so I began to study it.

By looking at its source code and Google search knowledge, I initially figured out that it is implemented through a JS. Here we will introduce it:

Special Effect advantages:

1. Accelerate the page loading speed of the WordPress site;
2. Non-abrupt image fading mode;
3. Simplified code, easy to operate and maintain. js code is only 1.6kbPrerequisites:
   : Your website loads jquery. js

 

Principle:

This special effect is rare.Gorgeous and accelerated
Because it can determine whether the visitor is viewing the current image.Non
Then, the reserved filling image grey.gif is loaded. The real image address is loaded only when the visitor slides the mouse wheel or browses the image location.
That is to say, if a visitor opens your page instantly and closes the page instantly, the pictures in the footer will not be loaded. Why not?
Don't worry about visitorFriendliness
This effect starts to load the image when the image is about to be browsed.

Implementation Method:

1. DownloadJquery. lazyload. js
   
   Download pre-filled Images
   Fill.gif
   Click here to package and download
   
   
2. Put the above two files in a directory of WordPress, or you can directly call them on the external site. (I uploaded it to pic.imtimmy.com for calling)
3. In the current topicHeader. php
   Add the following JS call code in the appropriate position. The inove topic background I used in the current period has the place to add JS Code:
   【Http://pic.imtimmy.com/wp-content/js/lazyload/
   Please customize some]
   【$ ("IMG ")
   Some can be used to specify which IMG takes effect on the page. For example, modify$ (". Content IMG ")

= Start

<Script language = "JavaScript" type = "text/JavaScript" src = "../JS/lazyload/jquery. lazyload. js"> </SCRIPT>
Jquery (document). Ready (
Function ($ ){
$ ("IMG"). lazyload ({
Placeholder: "../JS/lazyload/grey.gif ",
Effect: "fadein"
});
});

= End

 

 

1. <mce:script type="text/javascript" src="http://pic.imtimmy.com/wp-content/js/lazyload/jquery.lazyload.js" mce_src="http://pic.imtimmy.com/wp-content/js/lazyload/jquery.lazyload.js"></mce:script><mce:script type="text/javascript"><!--jQuery(document).ready(function($){$("img").lazyload({     placeholder : "http://pic.imtimmy.com/wp-content/js/lazyload/grey.gif",     effect      : "fadeIn"});});// --></mce:script>

4. Jquery. lazyload. JS Code
   Eval (function (P, A, C, K, E, D) {e = function (c) {return (C <? '': E (parseint (C/A) + (C = C % A)> 35? String. fromcharcode (C + 29): C. tostring (36)}; If (! ''. Replace (/^/, string) {While (c --) {d [E (c)] = K [c] | E (c )} k = [function (e) {return d [e]}]; E = function () {return '// W +'}; C = 1 }; while (c --) {If (K [c]) {P = P. replace (New Regexp ('// B' + E (c) + '// B', 'G'), K [c])} return p} ('(5 ($) {$. j. L = 5 (r) {8 1 = {d: 0, A: 0, B: "H", V: "N", 3:4}; 6 (r) {$. D (1, R)} 8 m = 9; 6 ("H" = 1. B) {$ (1.3 ). P ("H", 5 (B) {8 C = 0; M. T (5 () {6 (! $. K (9,1 )&&! $. L (9,1) {$ (9 ). Z ("O")} J {6 (C ++> 1.a) {g B }}); 8 W = $. M (M, 5 (f) {G! F. e}); M = $ (w)} g 9.t( 5 () {8 2 = 9; $(2 ). C ("S", $(2 ). C ("I"); 6 ("H "! = 1. B | $. K (2, 1) | $. L (2, 1) {6 (1.u) {$ (2 ). C ("I", 1.u)} J {$ (2 ). K ("I")} 2.e= B} J {2.e= x} $(2 ). T ("O", 5 () {6 (! 9. e) {$ ("<v/> "). P ("X", 5 () {$ (2 ). Y (). C ("I", $(2 ). C ("S") [1.v] (1.z); 2.e= x }). C ("I", $(2 ). C ("S") }}); 6 ("H "! = 1. B) {$ (2). P (1. B, 5 (B) {6 (! 2. e) {$ (2 ). Z ("O") }}) }}; $. k = 5 (F, 1) {6 (1.3 = E | 1.3 = 4) {8 7 = $(4 ). F () + $(4 ). O ()} J {8 7 = $(1.3 ). N (). G + $(1.3 ). F ()} G 7 <= $ (f ). N (). g-1.d}; $. L = 5 (F, 1) {6 (1.3 = E | 1.3 = 4) {8 7 = $(4 ). I () + $(4 ). U ()} J {8 7 = $(1.3 ). N (). q + $(1.3 ). I ()} G 7 <= $ (f ). N (). q-1.d}; $. D ($. P [/':/'], {"Q-H-7": "$. K (A, {d: 0, 3: 4}) "," R-H-7 ":"! $. K (A, {d: 0, 3: 4}) "," S-y-7 ":" $. L (A, {d: 0, 3: 4}) "," q-y-7 ":"! $. L (A, {d: 0, 3: 4}) "}) (W); ', 62,62, '| Settings | self | container | window | function | if | fold | Var | this | event | ATTR | threshold | loaded | element | return | scroll | SRC | else | belowthefold | rightoffold | elements | offset | appear | bind | left | options | original | each | placeholder | effect | temp | true | of | trigger | failurelimit | false | counter | extend | undefined | height | top | the | width | Fn | removeattr | lazyload | grep | show | scrolltop | expr | below | abve | right | one | scrollleft | IMG | jquery | load | hide | effectspeed '. split ('|'), 0 ,{}))