DC
/
arm-api
关注 5
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
29 提交
3 分支
分支: master
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'master'
${ noResults }
arm-api/public/assets/js/plugins/slideshow/owl/v1/demos/lazyLoad.html

lazyLoad.html 14KB
永久链接 文件历史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3.   <head>

  4.     <meta charset="utf-8">

  5.     <title>Owl Carousel - Lazy Load</title>

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  7.     <meta name="description" content="jQuery Responsive Carousel - Owl Carusel">

  8.     <meta name="author" content="Bartosz Wojciechowski">

  9.     

  10.     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>

  11.     <link href="../assets/css/bootstrapTheme.css" rel="stylesheet">

  12.     <link href="../assets/css/custom.css" rel="stylesheet">

  13. 

  14.     <!-- Owl Carousel Assets -->

  15.     <link href="../owl-carousel/owl.carousel.css" rel="stylesheet">

  16.     <link href="../owl-carousel/owl.theme.css" rel="stylesheet">

  17. 

  18.     <!-- Prettify -->

  19.     <link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">

  20.     

  21. 

  22.     <!-- Le fav and touch icons -->

  23.     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">

  24.     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">

  25.       <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">

  26.                     <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">

  27.                                    <link rel="shortcut icon" href="../assets/ico/favicon.png">

  28.   </head>

  29.   <body>

  30. 

  31.       <div id="top-nav" class="navbar navbar-fixed-top">

  32.         <div class="navbar-inner">

  33.           <div class="container">

  34.             <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

  35.             <span class="icon-bar"></span>

  36.             <span class="icon-bar"></span>

  37.             <span class="icon-bar"></span>

  38.           </button>

  39.             <div class="nav-collapse collapse">

  40.             <ul class="nav pull-right">

  41.               <li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>

  42.               <li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>

  43.             </ul>

  44.             <ul class="nav pull-left">

  45.               

  46.             </ul>

  47.             </div>

  48.           </div>

  49.         </div>

  50.       </div>

  51.    

  52.     <div id="title">

  53.       <div class="container">

  54.         <div class="row">

  55.           <div class="span12">

  56.             <h1>Lazy Load</h1>

  57.           </div>

  58.         </div>

  59.       </div>

  60.     </div>

  61. 

  62.       <div id="demo">

  63.         <div class="container">

  64.           <div class="row">

  65.             <div class="span12">

  66. 

  67.               <div id="owl-demo" class="owl-carousel">

  68.                 <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>

  69.                 <div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>

  70.                 <div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>

  71.                 <div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"></div>

  72.                 <div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>

  73.                 <div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"></div>

  74.                 <div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"></div>

  75.                 <div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"></div>

  76.                 <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>

  77.                 <div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>

  78.                 <div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>

  79.                 <div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"></div>

  80.                 <div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>

  81.                 <div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"></div>

  82.                 <div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"></div>

  83.                 <div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"></div>

  84.               </div>

  85. 

  86.             </div>

  87.           </div>

  88.         </div>

  89. 

  90.     </div>

  91. 

  92.     <div id="example-info">

  93.       <div class="container">

  94.         <div class="row">

  95.           <div class="span12">

  96.             <h1>Setup</h1>

  97.             <p>Delays loading of images. Images outside of viewport wont be loaded before user scrolls to them. Great for mobile devices to speed up page loadings.

  98.             </p>

  99.             <p>

  100.               Img need special class <code>class="lazyOwl"</code> and path to image in <code>data-src=""</code>: 

  101.               <blockquote><code>&lt;img class="lazyOwl" data-src="path-to-your-image"&gt;</code></blockquote>

  102.               </p>

  103.             <ul class="nav nav-tabs" id="myTab">

  104.               <li class="active"><a href="#javascript">Javascript</a></li>

  105.               <li><a href="#HTML">HTML</a></li>

  106.               <li><a href="#CSS">CSS</a></li>

  107.             </ul>

  108.              

  109.             <div class="tab-content">

  110. 

  111.               <div class="tab-pane active" id="javascript">

  112. <pre class="pre-show prettyprint linenums">

  113. $(document).ready(function() {

  114. 

  115.   $("#owl-demo").owlCarousel({

  116.     items : 4,

  117.     lazyLoad : true,

  118.     navigation : true

  119.   }); 

  120. 

  121. });

  122. </pre> 

  123.               </div>

  124. 

  125.               <div class="tab-pane" id="HTML">

  126. <pre class="pre-show prettyprint linenums">

  127. &lt;div id="owl-demo" class="owl-carousel"&gt;

  128.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  129.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  130.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  131.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  132.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  133.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  134.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  135.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  136.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  137.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  138.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  139.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  140.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  141.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  142.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  143.   &lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;

  144. &lt;/div&gt;

  145. </pre>

  146.               </div>

  147. 

  148.               <div class="tab-pane" id="CSS">

  149. <pre class="pre-show prettyprint linenums">

  150. #owl-demo .item{

  151.   margin: 3px;

  152. }

  153. #owl-demo .item img{

  154.   display: block;

  155.   width: 100%;

  156.   height: auto;

  157. }

  158. </pre>

  159. </div>

  160.             </div><!--End Tab Content-->

  161. 

  162.           </div>

  163.         </div>

  164.       </div>

  165.     </div>

  166. 

  167.     <div id="more">

  168.       <div class="container">

  169. 

  170.         <div class="row">

  171.           <div class="span12">

  172.             <h1>More Demos</h1>

  173.           </div>

  174.         </div>

  175. 

  176.         <div class="row demos-row">

  177.           <div class="span3">

  178.             <a href="images.html" class="demo-box">

  179.               <div class="demo-wrapper demo-images clearfix">

  180.                 <div class="demo-slide"><div class="bg"></div></div>

  181.                 <div class="demo-slide"><div class="bg"></div></div>

  182.                 <div class="demo-slide"><div class="bg"></div></div>

  183.               </div>

  184.               <h3>Images</h3>

  185.             </a>

  186.           </div>

  187. 

  188.           <div class="span3">

  189.             <a href="custom.html" class="demo-box">

  190.               <div class="demo-wrapper demo-custom clearfix">

  191.                 <div class="demo-slide"><div class="bg"></div></div>

  192.                 <div class="demo-slide"><div class="bg"></div></div>

  193.                 <div class="demo-slide"><div class="bg"></div></div>

  194.                 <div class="demo-slide"><div class="bg"></div></div>

  195.                 <div class="demo-slide"><div class="bg"></div></div>

  196.                 <div class="demo-slide"><div class="bg"></div></div>

  197.                 <div class="demo-slide"><div class="bg"></div></div>

  198.                 <div class="demo-slide"><div class="bg"></div></div>

  199.                 <div class="demo-slide"><div class="bg"></div></div>

  200.                 <div class="demo-slide"><div class="bg"></div></div>

  201.               </div>

  202.               <h3>Custom</h3>

  203.             </a>

  204.           </div>

  205. 

  206.           <div class="span3">

  207.             <a href="itemsCustom.html" class="demo-box">

  208.               <div class="demo-wrapper demo-full clearfix">

  209.                 <div class="demo-slide"><div class="bg"></div></div>

  210.                 <div class="demo-slide"><div class="bg"></div></div>

  211.                 <div class="demo-slide"><div class="bg"></div></div>

  212.                 <div class="demo-slide"><div class="bg"></div></div>

  213.               </div>

  214.               <h3>Custom 2</h3>

  215.             </a>

  216.           </div>

  217. 

  218.           <div class="span3">

  219.             <a href="one.html" class="demo-box">

  220.               <div class="demo-wrapper demo-one clearfix">

  221.                 <div class="demo-slide"><div class="bg"></div></div>

  222.               </div>

  223.               <h3>One Slide</h3>

  224.             </a>

  225.           </div>

  226. 

  227.         </div>

  228.         <div class="row demos-row">

  229.           <div class="span3">

  230.             <a href="json.html" class="demo-box">

  231.               <div class="demo-wrapper demo-Json clearfix">

  232.                 <div class="demo-slide"><div class="bg"></div></div>

  233.                 <div class="demo-slide"><div class="bg"></div></div>

  234.                 <div class="demo-slide"><div class="bg"></div></div>

  235.                 <div class="demo-slide"><div class="bg"></div></div>

  236.                 <div class="demo-slide"><div class="bg"></div></div>

  237.               </div>

  238.               <h3>JSON</h3>

  239.             </a>

  240.           </div>

  241. 

  242.           <div class="span3">

  243.             <a href="customJson.html" class="demo-box">

  244.               <div class="demo-wrapper demo-Json-custom clearfix">

  245.                 <div class="demo-slide"><div class="bg"></div></div>

  246.                 <div class="demo-slide"><div class="bg"></div></div>

  247.                 <div class="demo-slide"><div class="bg"></div></div>

  248.               </div>

  249.               <h3>JSON Custom</h3>

  250.             </a>

  251.           </div>

  252. 

  253.           <div class="span3">

  254.             <a href="lazyLoad.html" class="demo-box">

  255.               <div class="demo-wrapper demo-lazy clearfix">

  256.                 <div class="demo-slide"><div class="bg"></div></div>

  257.                 <div class="demo-slide"><div class="bg"></div></div>

  258.                 <div class="demo-slide"><div class="bg"></div></div>

  259.               </div>

  260.               <h3>Lazy Load</h3>

  261.             </a>

  262.           </div>

  263. 

  264.           <div class="span3">

  265.             <a href="autoHeight.html" class="demo-box">

  266.               <div class="demo-wrapper demo-height clearfix">

  267.                 <div class="demo-slide"><div class="bg"></div></div>

  268.               </div>

  269.               <h3>Auto Height</h3>

  270.             </a>

  271.           </div>

  272. 

  273.         </div>

  274.       </div>

  275.     </div>    

  276. 

  277.     <div id="footer">

  278.       <div class="container">

  279.         <div class="row">

  280.           <div class="span12">

  281.             <h5>Bartosz Wojciechowski 2013 / @OwlFonk / 

  282.             <a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> / 

  283.             <a href="../changelog.html">changelog</a> /

  284.             <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> / 

  285.             <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>

  286.             <script>

  287.             var owldomain = window.location.hostname.indexOf("owlgraphic");

  288.             if(owldomain !== -1){

  289.               !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

  290.             }

  291.             </script>

  292.             </h5>

  293.           </div>

  294.         </div>

  295.       </div>

  296.     </div>

  297. 

  298. 

  299.     <script src="../assets/js/jquery-1.9.1.min.js"></script> 

  300.     <script src="../owl-carousel/owl.carousel.js"></script>

  301. 

  302. 

  303.     <!-- Demo -->

  304. 

  305.     <style>

  306.     #owl-demo .item{

  307.         margin: 3px;

  308.     }

  309.     #owl-demo .item img{

  310.         display: block;

  311.         width: 100%;

  312.         height: auto;

  313.     }

  314.     </style>

  315. 

  316. 

  317.     <script>

  318.     $(document).ready(function() {

  319. 

  320.       $("#owl-demo").owlCarousel({

  321.         items : 4,

  322.         lazyLoad : true,

  323.         navigation : true

  324.       });

  325. 

  326.     });

  327.     </script>

  328. 

  329. 

  330.     <script src="../assets/js/bootstrap-collapse.js"></script>

  331.     <script src="../assets/js/bootstrap-transition.js"></script>

  332.     <script src="../assets/js/bootstrap-tab.js"></script>

  333. 

  334.     <script src="../assets/js/google-code-prettify/prettify.js"></script>

  335. 	  <script src="../assets/js/application.js"></script>

  336. 

  337.   </body>

  338. </html>