enabled.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title>Lazy Load Enabled</title>
  6. <meta name="generator" content="Mephisto" />
  7. <link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
  8. <link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
  9. <style type="text/css">
  10. #sidebar {
  11. width: 0px;
  12. }
  13. #content {
  14. width: 770px;
  15. }
  16. </style>
  17. <script>
  18. var _gaq = _gaq || [];
  19. _gaq.push(['_setAccount', 'UA-190966-1']);
  20. _gaq.push(['_trackPageview']);
  21. _gaq.push(['_trackPageLoadTime']);
  22. (function() {
  23. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  24. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  25. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  26. })();
  27. </script>
  28. </head>
  29. <body>
  30. <div id="wrap">
  31. <div id="header">
  32. <p>
  33. <h1>Lazy Load</h1><br />
  34. <small>Image lazy loader plugin for jQuery.</small>
  35. <ul id="nav">
  36. <li id="first"><a href="/" class="active">weblog</a></li>
  37. <li><a href="/projects" class="last">projects</a></li>
  38. <!--
  39. <li><a href="/cv" class="last">cv</a></li>
  40. -->
  41. </ul>
  42. </p>
  43. </div>
  44. <div id="content">
  45. <h2>Plugin enabled</h2>
  46. <div class="entry">
  47. <p>
  48. Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down
  49. they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page
  50. where plugin is <a href="disabled.html">disabled</a>, same page with
  51. <a href="enabled_fadein.html">fadein effect</a>, page with <a href="enabled_wide.html">wide
  52. layout</a> or wide content <a href="enabled_wide_container.html">inside container</a>.
  53. </p>
  54. <code>
  55. <pre>
  56. $("img").lazyload();</pre>
  57. </code>
  58. <img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
  59. <img src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
  60. <img src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
  61. <img src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
  62. <img src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
  63. <img src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
  64. </div>
  65. <div id="sidebar">
  66. </div>
  67. <div id="footer">
  68. </div>
  69. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" charset="utf-8"></script>
  70. <script src="jquery.lazyload.js?v=1.8.3" charset="utf-8"></script>
  71. <script type="text/javascript" charset="utf-8">
  72. $(function() {
  73. $("img").lazyload();
  74. });
  75. </script>
  76. </body>
  77. </html>