0

I am currently facing an issue while using the jQuery Lazy Load plugin for my website. I hope someone can shed some light on this problem and provide some guidance on how to resolve it.

Problem:

I have integrated the jQuery Lazy Load plugin into my website to load images and AJAX content as the user scrolls down. However, I have encountered an unexpected behavior where the plugin continues to trigger AJAX requests even after the content has been removed/replaced from the page. This leads to unnecessary server requests and impacts the overall performance of the website.

Code Example:

Here is a simplified version of my code setup:

<div class="content">
    <img class="lazy" data-src="images/1.jpg" />
    <img class="lazy" data-src="images/2.jpg" />
    <img class="lazy" data-src="images/3.jpg" />
    <img class="lazy" data-src="images/4.jpg" />
    <img class="lazy" data-src="images/5.jpg" />
    <!-- ... -->
    <img class="lazy" data-src="images/296.jpg" />
    <img class="lazy" data-src="images/297.jpg" />
</div>

$(document).ready(function() {
    $('.lazy').Lazy();
});

// Some other code that replaces the content inside '.content' div
$('.content').html('<p>New content has been replaced.</p>');

Expected Behavior:

I anticipated that removing or replacing the content within the '.content' div would prevent any further AJAX requests triggered by the Lazy Load plugin. However, this is not the case, and the requests continue even for content that is no longer present on the page.

Has anyone else experienced a similar issue with the jQuery Lazy Load plugin? How can I ensure that the plugin stops making AJAX requests for content that has been removed or replaced on the page? Are there any specific configurations or workarounds that could help me overcome this problem?

I greatly appreciate any insights or suggestions you may have. Thank you in advance for your help!

t.niese
  • 39,256
  • 9
  • 74
  • 101
user3670605
  • 47
  • 6
  • 2
    This does not answer your question: But most [browsers used today](https://caniuse.com/?search=loading) support `loading="lazy"` on image tags, which results in the browser deciding when the image should be loaded. You could consider using that instead of JavaScript code. – t.niese Aug 08 '23 at 13:45
  • Thank you but it's not full supported yet. – user3670605 Aug 09 '23 at 06:22
  • 1
    What are your concerns regarding the support of `loading="lazy"`? – t.niese Aug 09 '23 at 07:35
  • Can you provide more info on *"**the** jQuery Lazy Load plugin*" - without searching, I'm confident there's more than one. Maybe a homepage or CDN link? – freedomn-m Aug 09 '23 at 09:11
  • @freedomn-m: sure, here you are: http://jquery.eisbehr.de/lazy/ – user3670605 Aug 09 '23 at 10:39
  • Ok, had a quick look. The jquery-lazy plugin will attempt to load images that appear in the viewport. Given your HTML, that's *all* of the images at startup. There's no "AJAX" it simply sets the src= to data-src. So, on page load, 300 images are queued *by the browser* based on [max parallel connections](https://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser). Once this queue has been completed, you remove the images. But the queue has already started and is handled by the browser doing `src=`, there's no "loop" or "ajax" requests/queue to cancel. – freedomn-m Aug 09 '23 at 10:57
  • If you have *any* idea how big these images are, then I suggest putting in at least a `height` attribute or style against each one. eg `height='10'` if you put 10 and your page is 800px, then 80 will be shown and the other 220 will only be lazy-loaded when the page scrolls. If you put 100 height, then only 8 will be loaded (etc). You could also designate a default placeholder on all the images, `` then that placehold will be loaded once at startup and shift all the other images down accordingly so they are *not* loaded at startup. – freedomn-m Aug 09 '23 at 11:00
  • In short: you're not "lazy" loading as images are scrolled into view, because they are already in view. – freedomn-m Aug 09 '23 at 11:00
  • ** *then 80 will be shown* - this will depend on other layout / image width of course, eg 80x1 will still show 1 row of 1024 images (on a 1024x800 window for example) – freedomn-m Aug 09 '23 at 11:06
  • @freedomn-m I've got that I can't do anything for this issue , that's a shame. Of course, I've oversimplified my script, but I'm just wondering how is that possible to do what I want to do without overstress the webserver and client (I also have video in lazy mode, since they remain in queue, when you scroll with replaced content, you can see the effect of download large files). – user3670605 Aug 09 '23 at 11:22

0 Answers0