Question

知道如何强制图片加载 具体 div Lazy Load XT jQuery plugin？我的意思是在页面加载没有页面滚动或视口后，data-src=""图像会自动加载。
此插件仅在以下事件load orientationchange resize scroll上加载图片。
但是找不到任何证明如何实现这一目标的文档。

HTML：

<div class="specific">
<img data-src="/images/post-image.jpg">
</div>

注意：我无法手动将img属性data-src=""更改为src=""

Answer 1

我不知道Layz Load XT的方法。但我认为这是一个非常简洁的功能，所以我为此更新了自己的插件jQuery Lazy。也许这对你有帮助。它从版本1.7.4开始提供。

下面我给你举了一个例子。只需使用公共函数force加载特定元素，忽略视口。

// create lazy instance
var instance = $(".lazy").lazy({
    chainable: false,
    autoDestroy: false,

    // below just for demonstration
    bind: "event",
    appendScroll: null
});

// just for demonstration
$("body")
  .append('<img class="lazy test1" src="" data-src="//dummyimage.com/150x100/&text=1">')
  .append('<img class="lazy test2" src="" data-src="//dummyimage.com/150x100/&text=2">');
instance.addItems(".lazy");

// load only 'img' with class '.test1'
instance.force(".test1");

img {
  width: 150px;
  height: 100px;
  margin: 5px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>

在Lazy Load XT上强制图像加载

1 个答案: