1. 程式人生 > >jquery外掛圖片延時載入例項詳解

jquery外掛圖片延時載入例項詳解

$("img").lazyload();

這將會使所有的圖片都延遲載入。


當然外掛還有幾個配置項可供設定。

1.改變threshold

$(“img”).lazyload({ threshold : 200 });

把閥值設定成200 意思就是當圖片沒有看到之前先load 200畫素。


2.當然了你也可以通過設定佔位符圖片和自定事件來觸發載入圖片事件
複製程式碼 程式碼如下:

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});


3.可以通過定義effect 引數來定義一些圖片顯示效果
複製程式碼 程式碼如下:

$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

LazyLoad(延遲載入)技術不僅僅用在對網頁中圖片的延遲載入,對資料同樣可以,Google Reader和Bing圖片搜尋就把
LazyLoad技術運用的淋漓盡致;
缺陷:
1.與Ajax技術的衝突;
2.圖片的延遲載入,遇到高度特別高的圖片,會出現停止載入的問題;
3.寫程式碼不規範的同學要注意了,不管由於什麼原因,如果您的頁面中,img標籤的height屬性未定義,那麼我建議您最好不要使用ImageLazyLoad

<script type="text/javascript" charset="utf-8">
$(function () {
$("img").lazyload({
effect: "fadeIn"
});
});
</script>
</body>
</html>

相關推薦

jquery外掛圖片載入例項

$("img").lazyload(); 這將會使所有的圖片都延遲載入。 當然外掛還有幾個配置項可供設定。 1.改變threshold $(“img”).lazyload({ threshold : 200 }); 把閥值設定成200 意思就是當圖片沒有看到之前先load 200畫

自己動手,寫自己的lazyload,讓外掛涼快去——網站優化之圖片載入

最近一個專案裡,遇到一個這樣的需求:這是一個WEBAPP應用,應用所有的邏輯都聚焦在一個頁面內,客戶要求1.頁面載入速度要快,2頁面響應要快。3.這個頁面只能一屏,不能出現滾動條。因此這個頁面包含了大量的彈出層的操作。 由於這個頁面中,坑爹地包含了136張圖片,主要是很多L

ionic入門教程第十五課-ionic效能優化之圖片載入

週五的時候有個朋友讓我寫一個關於圖片延時載入的教程, 直到今天才有空編輯,這階段真的是很忙,公眾號都變成殭屍號了。 實在是對不起大家。 有人喜歡我的教程,可能我總習慣了用比較簡單容易理解的方式去描述這些東西。 別的就不多說了,大家遇到什麼問題。 可以直接聯絡我,不是一句話兩

jquery載入動畫焦點圖- 有點類似視差動畫

<script type="text/javascript">$('.DB_tab25').DB_tabMotionBanner({key:'b28551',autoRollingTime:10000,                            bgSpeed:500,motion:{

緩沖加載圖片jQuery 插件 lazyload.js 使用方法

java ajax jpg ide javascrip ava ade src doc 在寫代碼的時候,經常會用到懶加載的模式,以前是通過window.onload的模式去加載,但是圖片很多或者用ajax請求的時候,就會很麻煩,現在用lazyload的模式加載方便很多

Hibernate對映關係之載入

當一個主物件中包涵從物件時,不同關心 配置會有不同的結果 各個關係之前的區別: one-to-one             查詢主物件:                 預設的不是延時載入,查詢主物件時也會把從物件查詢出來                 當

什麼是Hibernate載入

1、延遲載入,也叫懶載入,它是Hibernate為提高程式執行效率而提供的一種機制,即只有真正使用該物件的資料時才會建立。 2、Hibernate中主要是通過代理(proxy)機制來實現延遲載入。它的具體過程:Hibernate從資料庫獲取某一個物件資料時,或獲取某一個物件的集合屬性值時

Java 使用RabbitMQ外掛實現佇列

Springboot專案,windows環境 環境配置 在rabbitmq 3.5.7及以上的版本提供了一個外掛(rabbitmq-delayed-message-exchange)來實現延遲佇列功能。同時外掛依賴Erlang/OPT 18.0及以上。 外掛下載地址: http

New UI-標籤載入佈局

New UI-<ViewStub>標籤延時載入佈局  ——轉載請註明出處:coder-pig,歡迎轉載,請勿用於商業用途! 小豬Android開發交流群已建立,歡迎大家加入,無論是新手

hibernate 懶載入載入

一、延時載入配置: 下面把Customer.hbm.xml檔案的<class>元素的lazy屬性設為true,表示使用延遲檢索策略: Xml程式碼 <class name="mypack.Customer" table="CUSTOMERS" lazy="

Hibernate中的即時載入(get)和載入(load)

一,即時載入     Student student = session.get(Student.class, 22);     System.out.println(student);       &nb

jQuery外掛 ajax實現上傳例項

ajaxFileUpload.js 很多同名的,因為做出來一個很容易。 我用的是這個:https://github.com/carlcarl/AjaxFileUpload  下載地址在這裡:http://files.cnblogs.com/files/kissdodog/a

1、單例模式(立即載入載入

A、餓漢模式 package demo; /** * Created by sunyifeng on 17/10/19. */ public class ObjectA { // 餓汗模式

什麼是hibernate的延遲載入,什麼時候使用載入,為什麼要用載入

所謂懶載入(lazy)就是延時載入,延遲載入。 什麼時候用懶載入呢,我只能回答要用懶載入的時候就用懶載入。 至於為什麼要用懶載入呢,就是當我們要訪問的資料量過大時,明顯用快取不太合適, 因為記憶體容量有限 ,為了減少併發量,減少系統資源的消耗, 我們讓資料在需要的時候才進行載入,這時我們就用到了懶載入。 比

Android 網路載入

在進行網路訪問等耗時操作的時候,我們經常會用到載入框,也提高了使用者體驗。 一、顯示載入框: ProgressDialog progressDialog = ProgressDialog.show(LoginActivity.this,"Loading.

基於浮動的移動端兩列可載入的瀑布流佈局

由於工作需要需要寫一個移動端可以延時載入的瀑布流佈局頁面,於是開始查資料,百度,對瀑布流有了一些理解,一直以來都有寫部落格的想法,於是有了這篇博文! 幾點說明 1.本文所說的瀑布流指的是等寬不等高的瀑布流 2.本問純屬記錄用,筆者水平有限,如有錯誤歡迎指正

例項載入過程

在看這篇部落格之前: 想深入瞭解類的載入,從.class檔案到類被載入到虛擬機器並初始化可以檢視類的載入過程詳解 類的載入 什麼時候類載入:第一次需要使用類資訊時載入。 類載入的原則

ViewPager+fragment載入,懶載入(資料快取)

今天開發遇到資料快取的問題, ViewPager+2個fragment,大家都知道ViewPager有預載入的功能,每次都會把下一個頁面同時載入,這樣雖然有時很好,但是使用者只需看一個Fragment

jquery中的效果

//使用 setTimeout 時需注意,當該程式碼執行時,第一個引數應該為:需要編譯的程式碼、或者一個函式 //例1:setTimeout("alert('x')", 2000);//不起延時作

ScheduledThreadPoolExecutor實現定時器和載入功能

java.util.concurrent.ScheduledThreadPoolExecutor 是 JDK1 .6之後自帶的 包,功能強大,能實現定時器和延時載入的功能 各類功能和處理方面優於Timer 1、定時器: ScheduledThreadPoolExecut