本文實例講述了jQuery實現圖片預加載效果代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：
具體代碼如下：
html代碼：
<div class="main"> <br> <div class="title">圖片預加載</div> <div class="content"> <div class="img"> <a href=""> <img lazyloadsrc="images/1.jpg" alt="" width="200" height="120"> </a> <span class="loading"></span> </div> <div class="img"> <a href=""> <img lazyloadsrc="images/2.jpg" alt="" width="200" height="120"> </a> <span class="loading"></span> </div> <div class="img"> <a href=""> <img lazyloadsrc="images/3.jpg" alt="" width="200" height="120"> </a> <span class="loading"></span> </div> <div class="img"> <a href=""> <img lazyloadsrc="images/4.jpg" alt="" width="200" height="120"> </a> <span class="loading"></span> </div> <div class="img"> <a href=""> <img lazyloadsrc="images/5.jpg" alt="" width="200" height="120"> </a> <span class="loading"></span> </div> <div class="img"> <a href=""> <img lazyloadsrc="images/6.jpg" alt="" width="200" height="120"> </a> <span class="loading"></span> </div> </div> </div>
js代碼：
$(function () { $("[lazyLoadSrc]").YdxLazyLoad({ onShow: function () { $(this).parent().next().hide() } }); });本文已被整理到了《jquery圖片加載方法匯總》 ，歡迎大家學習閱讀。
大家在加載圖片時就會看到這種效果，現在知道是實現的過程了吧，希望大家喜歡小編分享的jQuery實現圖片預加載效果。
新聞熱點
疑難解答
