javascript - 在 Lazy Load XT 上强制加载图像

Question

知道如何强制加载特定 div 的Lazy Load XT jQuery plugin ?
我的意思是 data-src="" 图像将在页面加载后自动加载而无需页面滚动或视口(viewport)。
此插件仅在以下事件中加载图像 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 版本开始可用。

下面我给大家举了个例子。只需使用公共(public)函数 force 加载特定元素，忽略视口(viewport)。

// 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>