圖片懶加載、ajax異步調用數據、lazyload插件的使用


關於這個效果還是很簡單的,樣式部分我就不多說了,我就簡單的寫了一下布局,

這是css樣式

我們先說一下實現的原理。

我們都知道在於圖片的引入,我們都是用src來引入圖片地址。從而實現圖片的顯示。那我們讓他開始不加載src的地址,把src的地址放在一個自定義屬性中(自定義屬性,HTML5的新特性);

這樣我們就可以把地址都放在自定義屬性中,當我們需要的時候,在放在src中。

那懶加載是怎么加載?開始加載幾條信息,當我們閱讀完了以后接着加載。

在移動端,都是在滑塊到底的時候,我們觸發請求,讓他請求更多的圖片,在pc端就有分頁的一個效果,其實原理差不多;

當滑塊距離頂部的距離加上   頁面高度 大於等於總高度的時候,就說明到了最底部; 

(說的不全面,太片面,希望大佬留言指正);

接下來就是寫ajax請求了,就是最基本的樣式。

里面的data-original是我自定的屬性、儲存圖片地址;

src里放的地址是圖片還沒有加載出來時,顯示的加載動畫

(我這里請求的地址,是我搭建的一個本地數據。如果不知道的可以去看一下我寫的另一個關於json:server 搭建的一個博客)

接下來就是我們去下載jquery的插件lazyload的插件了(下載地址:http://www.jq22.com/jquery-info390

然后我們引入它

這樣我們頁面上就會出現我們請求的信息了。並且展示出來。

我們還可以在下面加一個淡入淡出的效果

接下來把我們寫的ajax請求放在一個函數里;

在接下了就是判斷是否滑塊滑到最低部。

其中我有倆處寫有我命名的函數 。第一個是開始觸發一次請求,二是當滑塊滑動到最底部是觸發請求。

開始調用請求的原因是。我寫的一個分段,開始讓他只加載5條

這樣就完成了全部。寫的有點亂,看的時候捋一捋的看看。嘿嘿!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM