整体效果:
HTML部分:
<div class="lazy-box"><img class="lazy" data-original="img/1.jpg" alt="1.jpg" width="960" height="540"><img class="lazy" data-original="img/2.jpg" alt="2.jpg" width="960" height="540"><img class="lazy" data-original="img/3.jpg" alt="3.jpg" width="960" height="540"><img class="lazy" data-original="img/4.jpg" alt="4.jpg" width="960" height="540"><img class="lazy" data-original="img/5.jpg" alt="5.jpg" width="960" height="540"></div>
.lazy-box {margin: 0px auto;padding: 0px;width: 960px;height: auto;}.lazy-box>img {outline: none;margin: 25px auto;padding: 0px;border: 1px solid #E0E0E0;background-color: #F0F0F0;}
JS部分:
$(document).ready(function() {$("div.lazy-box>img.lazy").lazyload({effect: 'fadeIn',placeholder: 'img/loading.jpg'});});