The first screen image cannot be loaded correctly

[kxbrand]

The first screen image cannot be loaded correctly

If the HTML page layout is such:

<div class="section" style="width:1000px;">
     <div class="article" style="width:500px;float:left;">
           <div class="text">text.....,More than one screen</div>
           <div class="img">
              <img class="j-lazy" src="/images/t.gif" data-original="/images/test/2.jpg" width="250" height="160" />
              <br/>
              <img class="j-lazy" src="/images/t.gif" data-original="/images/test/2.jpg" width="250" height="160" />
           </div>
      </div>
      <div class="side" style="width:300px;float:right;">
          <img class="j-lazy" src="/images/t.gif" data-original="/images/test/2.jpg" width="250" height="160" />
      </div>
</div>

The left picture on second screen, while the right picture on first screen, the right screen images can't be loaded correctly.

[tuupola]

URL of the page you have problem with?

[kxbrand]

Just a minute, please!

[tuupola]

Bind plugin separately to div.articleand div.side.

$("div.article img.j-lazy").lazyload({ ... });
$("div.side img.j-lazy").lazyload({ ...) });

[kxbrand]

Yeah, if i put the side code in front of the article code, can be loaded correctly

[kxbrand]

So,I want to know whether this plugin with HTML text stream loading sequence？

[kxbrand]

I am sorry,my english is very poor,thank you!

[tuupola]

No. This is for Lazy Loading images. I guess you are looking for infinite scrolling.

[kxbrand]

But from the demo, HTML text stream did affect to lazy load images

[tuupola]

What demo do you mean?

[tuupola]

I do not understand the question, but I already answered above:

Bind plugin separately to div.articleand div.side.

$("div.article img.j-lazy").lazyload({ ... });
$("div.side img.j-lazy").lazyload({ ...) });