要自定義 LazyLoad.js 的觸發條件,您可以使用 data-src
屬性來存儲實際的圖片鏈接,并通過修改該屬性的值來觸發圖片加載。以下是如何實現自定義觸發條件的步驟:
data-src
屬性,而不是直接使用 src
屬性。例如:<img data-src="path/to/image1.jpg" class="lazyload" />
<img data-src="path/to/image2.jpg" class="lazyload" />
$(document).ready()
函數來實現這一點:$(document).ready(function() {
$("img.lazyload").lazyload();
});
data-original
屬性來存儲實際的圖片 URL。當您需要加載圖片時,只需將 data-src
的值設置為 data-original
的值即可:// 假設您有一個按鈕,點擊后會加載圖片
$("#load-images-button").click(function() {
// 獲取所有帶有 lazyload 類的圖片元素
var lazyImages = $(".lazyload");
// 遍歷所有圖片元素
lazyImages.each(function() {
// 獲取 data-src 和 data-original 屬性的值
var dataSrc = $(this).data("src");
var dataOriginal = $(this).data("original");
// 將 data-src 的值設置為 data-original 的值,以觸發圖片加載
$(this).attr("src", dataOriginal);
// 清除 data-src 和 data-original 屬性
$(this).removeData("src");
$(this).removeData("original");
});
});
現在,當用戶點擊 #load-images-button
按鈕時,所有帶有 lazyload
類的圖片元素將按照您自定義的條件加載。您可以根據需要調整這些步驟以適應您的具體需求。