在延迟加载 XT 上强制加载图像

Question

知道如何强制图像加载 特定 div of Lazy Load XT jQuery plugin 吗？
我的意思是data-src="" 图像将在页面加载后自动加载没有页面滚动或视口。
此插件仅在以下事件上加载图像loadorientationchangeresizescroll。
但找不到任何说明如何实现这一点的文档。

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>