jQuery實現(xiàn)圖片預加載效果
本文實例講述了jQuery實現(xiàn)圖片預加載效果代碼。分享給大家供大家參考。具體如下:
運行效果截圖如下:
具體代碼如下:
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圖片加載方法匯總》 ,歡迎大家學習閱讀。
大家在加載圖片時就會看到這種效果,現(xiàn)在知道是實現(xiàn)的過程了吧,希望大家喜歡小編分享的jQuery實現(xiàn)圖片預加載效果。
- Jquery.LazyLoad.js修正版下載,實現(xiàn)圖片延遲加載插件
- jquery動態(tài)加載圖片數(shù)據(jù)練習代碼
- jQuery 瀑布流 浮動布局(一)(延遲AJAX加載圖片)
- Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
- js或者jquery判斷圖片是否加載完成實現(xiàn)代碼
- jQuery lazyLoad圖片延遲加載插件的優(yōu)化改造方法分享
- jquery插件lazyload.js延遲加載圖片的使用方法
- Jquery圖片延遲加載插件jquery.lazyload.js的使用方法
- jQuery處理圖片加載失敗的常用方法
- jQuery 判斷圖片是否加載完成方法匯總
相關文章
懶加載實現(xiàn)的分頁&&網(wǎng)站footer自適應
本文主要介紹了wap手機端懶加載分頁,web電腦端懶加載分頁以及web電腦端footer底部固定。具有很好的參考價值,下面就跟著小編一起來看下吧2016-12-12jQuery+Ajax+js實現(xiàn)請求json格式數(shù)據(jù)并渲染到html頁面操作示例
這篇文章主要介紹了jQuery+Ajax+js實現(xiàn)請求json格式數(shù)據(jù)并渲染到html頁面操作,結合實例形式分析了jQuery+Ajax請求json格式數(shù)據(jù)并渲染到html頁面相關步驟與操作技巧,需要的朋友可以參考下2020-06-06jquery實現(xiàn)商品sku多屬性選擇功能(商品詳情頁)
這篇文章主要介紹了jquery實現(xiàn)商品sku多屬性選擇功能(商品詳情頁),文中簡單給大家介紹了sku的概念,需要的朋友可以參考下2019-12-12jQuery實現(xiàn)企業(yè)網(wǎng)站橫幅焦點圖切換功能實例
這篇文章主要介紹了jQuery實現(xiàn)企業(yè)網(wǎng)站橫幅焦點圖切換功能,實例分析了jQuery企業(yè)網(wǎng)站焦點圖的詳細實現(xiàn)方法,非常簡單實用,需要的朋友可以參考下2015-04-04jquery與google map api結合使用 控件,監(jiān)聽器
關于jquery的獲取不再此處累贅,網(wǎng)上有許多關于jquery的介紹。2010-03-03Expandable "Detail" Table Rows
Expandable "Detail" Table Rows...2007-08-08jquery.boxy彈出框(后隔N秒后自動隱藏/自動跳轉)
對于 Boxy彈出框的使用之前寫過一些文章(查看jquery.boxy基礎),今天主要是在解決一個需要之后,覺得值得把它記錄下來,所以就再寫一篇,主要功能是,在彈出對話框后,隔N秒后自動隱藏,還有就是自動跳轉2013-01-01