加入amd支持

shekobe · Aug 7, 2014 · bbdc30e · bbdc30e
1 parent 5a3197c
commit bbdc30e
Show file tree

Hide file tree

Showing 21 changed files with 194 additions and 48 deletions.
diff --git a/README.textile b/README.textile
@@ -238,6 +238,18 @@ $("img.lazy").lazyload({
 
 请参阅 `enabled_no_fake_img_loader.html`
 
+h4. 与AMD模块加载器（如requirejs）一起使用
+
+<pre><img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574"></pre>
+
+<pre>
+require(['jquery','../lazyload'],function($){
+  $(".lazy").lazyload()
+})
+</pre>
+
+请参阅 `enabled_amd.html`
+
 h4. options对象
 
 你可以将options对象当做`lazyload`方法的第一个参数来使用。
@@ -559,6 +571,18 @@ $("img.lazy").lazyload({
 
 see `enabled_no_fake_img_loader.html`
 
+h4. with AMD loader (such as `requirejs`)
+
+<pre><img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574"></pre>
+
+<pre>
+require(['jquery','../lazyload'],function($){
+  $(".lazy").lazyload()
+})
+</pre>
+
+see `enabled_amd.html`
+
 h4. The options object
 
 You can use the options object as the first argument in the `lazyload` method.

diff --git a/examples/css/jieyou.css b/examples/css/jieyou.css
@@ -1,3 +1,6 @@
 .jumbotron .des{
 	color: #fff;
+}
+pre.prettyprint{
+	background-color: inherit;
 }
diff --git a/examples/disabled.html b/examples/disabled.html
@@ -61,8 +61,8 @@ <h2>Plugin disabled</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- // <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> --> -->
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
 </body>
 </html>
diff --git a/examples/enabled.html b/examples/enabled.html
@@ -68,17 +68,17 @@ <h2>Plugin enabled</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
      // $("img.lazy").lazyload({
      //  'load':function(){alert(1)},
      //  'appear':function(){alert(2)}
      // });
-    $("img.lazy").lazyload({})
+    $("img.lazy").lazyload()
   });
   </script>
 </body>

diff --git a/examples/enabled_ajax.html b/examples/enabled_ajax.html
@@ -74,10 +74,10 @@ <h2>Plugin enabled with AJAX loaded content</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
       $("#container").one("click", function() {

diff --git a/examples/enabled_amd.html b/examples/enabled_amd.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta charset="utf-8">
+  <title>Lazy Load Enabled</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link type="text/css" media="screen" href="css/appelsiini.css" rel="stylesheet">
+  <link href="css/font-awesome.min.css" rel="stylesheet"><link href="css/jieyou.css" rel="stylesheet">
+  <link rel="shortcut icon" href="ico/favicon.ico">
+  <!--[if lt IE 9]>
+    <script src="page_js/html5shiv.js"></script>
+  <![endif]-->
+
+  <style type="text/css">
+    .container img {
+      margin-bottom: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="jumbotron">
+    <div class="container">
+      <div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
+        <h1>lazyload Plugin for jQuery | Zepto</h1>
+        <p class="des">
+          <!--<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&amp;repo=jquery_lazyload&amp;type=watch&amp;count=true&amp;size=small" allowtransparency="true" frameborder="0" scrolling="0" width="92" height="30"></iframe>    
+          <iframe src="http://ghbtns.com/github-btn.html?user=tuupola&amp;repo=jquery_lazyload&amp;type=fork&amp;count=true&amp;size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>-->
+          This project is forked from <a href="https://github.com/tuupola/jquery_lazyload"><span class="label label-danger">tuupola/jquery_lazyload</span></a> and add features below:<br/>
+          * Many Details for improve performance;<br/>
+          * IE6/7 support;<br/>
+          * Available with <a href="https://github.com/madrobby/zepto"><span class="label label-danger">Zepto</span></a>;<br/>
+          * `vertical_only` \ `minimum_interval` \ `use_minimum_interval_in_ios` \ `no_fake_img_loader` options.
+        </p>
+        <p class="des">
+          More information on <a href="https://github.com/jieyou/lazyload"><span class="label label-danger">jieyou/lazyload</span></a>.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
+
+      <h2>Enabled with an AMD loader (such as `requirejs`)</h2>
+      <p>
+        Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down
+        they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page 
+        where plugin is <a href="disabled.html">disabled</a>, same page with 
+        <a href="enabled_fadein.html">fadein effect</a>,  page with <a href="enabled_wide.html">wide 
+        layout</a> or wide content <a href="enabled_wide_container.html">inside container</a>.
+      </p>
+
+      <pre class="prettyprint">
+&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"&gt;&lt;/script&gt;
+&lt;script>
+require.config({
+  // baseUrl: 'js/lib',
+  paths: {
+      // the left side is the module ID,
+      // the right side is the path to
+      // the jQuery file, relative to baseUrl.
+      // Also, the path should NOT include
+      // the '.js' file extension. This example
+      // is using jQuery 1.9.0 located at
+      // js/lib/jquery-1.9.0.js, relative to
+      // the HTML page.
+      jquery: 'http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min'
+  }
+});
+&lt;/script&gt;
+&lt;script&gt;
+require(['jquery','../lazyload'],function($){
+  $(".lazy").lazyload()
+})
+&lt;/script&gt;
+</pre>
+      <pre class="prettyprint">&lt;img class="lazy" data-original="img/example.jpg" width="765" height="574"&gt;</pre>
+
+      <div id="container">
+        <img class="lazy img-responsive" src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
+        <img class="lazy img-responsive" src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
+        <img class="lazy img-responsive" src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
+        <img class="lazy img-responsive" src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
+        <img class="lazy img-responsive" src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
+        <img class="lazy img-responsive" src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>      
+      </div>
+    </div>
+  </div>
+
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
+  <script>
+  require.config({
+    // baseUrl: 'js/lib',
+    paths: {
+        // the left side is the module ID,
+        // the right side is the path to
+        // the jQuery file, relative to baseUrl.
+        // Also, the path should NOT include
+        // the '.js' file extension. This example
+        // is using jQuery 1.9.0 located at
+        // js/lib/jquery-1.9.0.js, relative to
+        // the HTML page.
+        jquery: 'http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min'
+    }
+  });
+  </script>
+  <script>
+  require(['jquery','../lazyload'],function($){
+    $(".lazy").lazyload()
+  })
+  </script>
+
+
+</body>
+</html>
diff --git a/examples/enabled_background.html b/examples/enabled_background.html
@@ -66,10 +66,10 @@ <h2>Plugin enabled on css background images with fadein effect</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
      $("div.lazy").lazyload({

diff --git a/examples/enabled_container.html b/examples/enabled_container.html
@@ -81,10 +81,10 @@ <h2>Plugin enabled on container</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
       $("img.lazy").lazyload({effect : "fadeIn", container: $("#container")});

diff --git a/examples/enabled_fadein.html b/examples/enabled_fadein.html
@@ -70,10 +70,10 @@ <h2>Plugin enabled with fadein effect</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
      $("img.lazy").lazyload({

diff --git a/examples/enabled_gazillion.html b/examples/enabled_gazillion.html
@@ -147,11 +147,11 @@ <h2>Plugin enabled with gazillion images</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> --> 
   <script src="../lazyload.js"></script>
   <script src="http://bcs.duapp.com/jieyou-storage/jquery.scrollstop.min.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript">
       $(function() {
           $(".lazy").lazyload({

diff --git a/examples/enabled_image_full_width.html b/examples/enabled_image_full_width.html
@@ -78,10 +78,10 @@ <h2>Plugin enabled</h2>
 
 
 
-  <!-- <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script> -->
+  <!-- <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script> -->
   <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script>
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
      $("div.lazy").lazyload();

diff --git a/examples/enabled_no_fake_img_loader.html b/examples/enabled_no_fake_img_loader.html
@@ -69,10 +69,10 @@ <h2>Plugin enabled width no fake img loader</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
     $("img.lazy").lazyload({

diff --git a/examples/enabled_noscript.html b/examples/enabled_noscript.html
@@ -87,10 +87,10 @@ <h2>Plugin enabled with noscript fallback</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
     $("img.lazy").show().lazyload({

diff --git a/examples/enabled_timeout.html b/examples/enabled_timeout.html
@@ -75,10 +75,10 @@ <h2>Load images after five second delay</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {          
       $("img.lazy").lazyload({

diff --git a/examples/enabled_url_rewriter_fn.html b/examples/enabled_url_rewriter_fn.html
@@ -72,10 +72,10 @@ <h2>Plugin enabled width rewrite image's original url</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
      $("img.lazy").lazyload({

diff --git a/examples/enabled_vertical_only.html b/examples/enabled_vertical_only.html
@@ -78,10 +78,10 @@ <h2>Plugin enabled in page which can only scroll vertically.</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
       $("img.lazy").lazyload({vertical_only: true});

diff --git a/examples/enabled_wide.html b/examples/enabled_wide.html
@@ -71,10 +71,10 @@ <h2>Plugin enabled in wide page</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
       $("img.lazy").lazyload({effect: "fadeIn"});

diff --git a/examples/enabled_wide_container.html b/examples/enabled_wide_container.html
@@ -78,10 +78,10 @@ <h2>Plugin enabled on horizontal container</h2>
 
 
 
-  <script src="//webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
+  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
   <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
   <script src="../lazyload.js"></script>
-  <script src="page_js/demo.js"></script>
+  <!-- <script src="page_js/demo.js"></script> -->
   <script type="text/javascript" charset="utf-8">
   $(function() {
     $("img.lazy").lazyload({container: $("#container")});