"Pending" in Chrome When Lazy Loading Images in Dynamically Loaded Content

Question

I have a page with multiple independent sections displayed in tabs, each containing potentially hundreds of images. To make page load performant, I am doing two things:

• Loading the sections in parallel with JQuery promises
• Lazy loading the images with a JQuery lazy load plugin once those sections are rendered

Here is the pseudocode for how I am doing this in Coffeescript:

    $.when.apply($, sectionPromises).then( () ->
      render each section
      $("img.lazyload").lazyload() 
      return
    )

What ends up happening is the first few images at the top of the first tabbed section load fine, but all subsequent images--whether lower down in that first section or in other tabbed sections entirely--are simply "(pending)" in Chrome.

This does not happen in other parts of the site where I use the plugin to lazy load images in pages that are constructed conventionally (all at once). But here is the funny thing. The problem sometimes doesn't happen if I have Chrome Developer Tools open as I scroll down or move across tabs. Everything loads perfectly. How wild is that?

Any ideas on how to get these lazy loaded images in dynamically generated content to load properly in Chrome--without having Chrome Developer Tools open--is much appreciated.

Answer 1

Unfortunately, the best thing I could find is to navigate to chrome://net-internals/#sockets and hit the "Flush socket pools" button at the top of the page. Once I refresh the page with all the images, they all lazily load as they should.

Obviously expecting clients to tweak their browsers, let alone to know how, isn't an option, but for the time being this works.