图片延迟 jquery lazyload.js
Lazy Load Plugin for jQueryLazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load. Lazy Load is inspired by YUI ImageLoader Utility by Matt Mlinac. How to Use?Lazy Load depends on jQuery. Include them both in end of your HTML code: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> You must alter your HTML code. Put the place holder image into <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> then in your code do: $("img.lazy").lazyload(); This causes all images of class Fallback for Non JavaScript BrowsersPractically everyone has JavaScript enabled. However there are cases when you want to show the real images even if request come from client which does not support JavaScript. <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> <noscript><img src="img/example.jpg" width="640" heigh="480"></noscript> To prevent both placeholder and the real image showing at the same time hide the place holder with css. .lazy { display: none; } For JavaScript enabled browser you must enable displaying the placeholders when documents loads. This can be done at the same time when initializing the plugin. $("img.lazy").show().lazyload(); All this is optional can should be done only if you want the plugin to degrade gracefully. Setting SensitivityBy default images are loaded when they appear on the screen. If you want images to load earlier you can set $("img.lazy").lazyload({ threshold : 200 }); Event to Trigger LoadingEvent can be any jQuery event such as $("img.lazy").lazyload({ event : "click" }); Using EffectsBy default plugin waits for image to fully load and calls $("img.lazy").lazyload({ effect : "fadeIn" }); Images Inside ContainerYou can also use plugin for images inside scrolling container, such as div with scrollbar. Just pass the container as jQuery object. There is a demo for horizontal and vertical container. #container { height: 600px; overflow: scroll; } $("img.lazy").lazyload({ container: $("#container") }); When Images Are Not SequentialAfter scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with $("img.lazy").lazyload({ failure_limit : 10 }); Setting Delayed Loading of ImagesNot exactly feature of Lazy Load but it is also possible to delay loading of images. Following code waits for page to finish loading (not only HTML but also any visible images). Five seconds after page is finished, below the fold images are loaded automatically. You can also check the delayed loading demo. $(function() { $("img:below-the-fold").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000); }); Load Invisible ImagesThere are cases when you have invisible images. For example when using plugin in together with a large filterable list of items that can have their visibility state changed dynamically. To improve performance Lazy Load ignores hidden images by default. If you want to load hidden images set $("img.lazy").lazyload({ skip_invisible : false }); DownloadLatest source or minified. Plugin has been tested with Safari 5.1, Safari 6, Chrome 20, Firefox 12 on OSX and Chrome 20, IE 8 and IE 9 on Windows and Safari 5.1 on iOS 5 both iPhone and iPad.
|
|