CODEWITHSUNDEEP
javascriptjqueryhtmllazy-loading
Aariba
Aariba

Reputation: 1194

Force Image Load on Lazy Load XT

Any idea how to Force Image Load of specific div of Lazy Load XT jQuery plugin ?
I mean data-src="" image will load automatically after page load without page scroll or viewport.
This plugin only loads images on the following events load orientationchange resize scroll.
But cannot find any documentation showing how to achieve this.

HTML:

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

Note: I cannot manually change img attribute data-src="" to src=""

Upvotes: 2

Views: 1835

Answers (1)

eisbehr
eisbehr

Reputation: 12452

I don't know a way for Layz Load XT. But I think that is a pretty neat functionality, so I updated my own plugin, jQuery Lazy, for this. Maybe this helps you too. It's available since version 1.7.4.

Below I made you an example. Just use the public function force to load specific elements, ignoring the 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>

Upvotes: 2

Related Questions