Use class lazy in all examples. Also show HTML examples.

Johnny-young · Aug 8, 2013 · 6b3c033 · 6b3c033
1 parent 84bc845
commit 6b3c033
Show file tree

Hide file tree

Showing 9 changed files with 251 additions and 232 deletions.
diff --git a/enabled.html b/enabled.html
@@ -61,8 +61,8 @@ <h2>Plugin enabled</h2>
     </p>
 
     <code>
-      <pre>
- $("img").lazyload();</pre>   
+      <pre> $("img.lazy").lazyload();</pre>
+      <pre> &lt;img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574"&gt;</pre>
     </code>
 
     <div id="container">

diff --git a/enabled_ajax.html b/enabled_ajax.html
@@ -59,11 +59,14 @@ <h2>Plugin enabled</h2>
 
     <code>
       <pre>
-$("#container").one("click", function() {
-    $("#container").load("images.html", function(response, status, xhr) {
-        $("img.lazy").lazyload();
-    });              
-});</pre>   
+ $("#container").one("click", function() {
+     $("#container").load("images.html", function(response, status, xhr) {
+         $("img.lazy").lazyload();
+     });              
+ });</pre>
+
+ <pre> &lt;img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574"&gt;</pre>
+
     </code>
 
     <div id="container">

diff --git a/enabled_container.html b/enabled_container.html
@@ -64,19 +64,27 @@ <h2>Plugin enabled on container</h2>
 
     <code>
       <pre>
- $("img").lazyload({         
+ $("img.lazy").lazyload({         
      effect : "fadeIn",
      container: $("#container")
- });</pre>   
+ });</pre>
+
+<pre>
+ #container {
+     height: 600px;
+     overflow: scroll;
+ }</pre>
+ <pre> &lt;img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574"&gt;</pre>
+
     </code>
 
     <div id="container">
-        <img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
-        <img src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
-        <img src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
-        <img src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
-        <img src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
-        <img src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
+        <img class="lazy" src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
+        <img class="lazy" src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
+        <img class="lazy" src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
+        <img class="lazy" src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
+        <img class="lazy" src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
+        <img class="lazy" src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
     </div>
 
     </div>
@@ -90,7 +98,7 @@ <h2>Plugin enabled on container</h2>
   <script src="jquery.lazyload.js?v=1.8.5" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
       $(function() {          
-          $("img").lazyload({effect : "fadeIn", container: $("#container")});
+          $("img.lazy").lazyload({effect : "fadeIn", container: $("#container")});
       });
   </script>
 </body>

diff --git a/enabled_fadein.html b/enabled_fadein.html
@@ -62,17 +62,21 @@ <h2>Plugin enabled with fadein effect</h2>
 
     <code>
       <pre>
- $("img").lazyload({
-     effect       : "fadeIn"
+ $("img.lazy").lazyload({
+     effect : "fadeIn"
  });</pre>
+
+
+ <pre> &lt;img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574"&gt;</pre>
     </code>
+
 
-    <img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
-    <img src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
-    <img src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
-    <img src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
-    <img src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
-    <img src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
+    <img class="lazy" src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
+    <img class="lazy" src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
+    <img class="lazy" src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
+    <img class="lazy" src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
+    <img class="lazy" src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
+    <img class="lazy" src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
 
     <div id="sidebar">
 
@@ -85,7 +89,7 @@ <h2>Plugin enabled with fadein effect</h2>
   <script src="jquery.lazyload.min.js?v=1.8.5" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
       $(function() {
-          $("img").lazyload({
+          $("img.lazy").lazyload({
               effect : "fadeIn"
               /*
               appear : function(elements_left, settings) {