要自定义 LazyLoad.js 的触发条件,您可以使用 data-src
属性来存储实际的图片链接,并通过修改该属性的值来触发图片加载。以下是如何实现自定义触发条件的步骤:
- 在 HTML 中为每个图片元素添加
data-src
属性,而不是直接使用src
属性。例如:
- 初始化 LazyLoad.js,并确保在文档就绪后执行。您可以使用 jQuery 的
$(document).ready()
函数来实现这一点:
$(document).ready(function() { $("img.lazyload").lazyload(); });
- 为了自定义触发条件,您可以使用 LazyLoad.js 提供的
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 = https://www.yisu.com/ask/$(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
类的图片元素将按照您自定义的条件加载。您可以根据需要调整这些步骤以适应您的具体需求。