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