My client has a publishing website like a magazine that loads a rotating list of ads and because of this the web page takes a long time to load (even though the above the fold content loads super fast). However because of this the images for the page takes forever to load if we’re using lazy load because the rotating list of ads holds them up.
Is there some other alternative solution someone would suggest?
If your client is ok, you could try this:
- remove the carousal at onload. Instead replace it with a single hero image.
- let the page load and the images load as well.
- after the onload, replace the hero image with your carousal.
I am not sure on why the carousal would interfere with lazy loaded images. Only images below the fold would be lazy-loaded. By the time this occurs, the carousal would already have been populated. Maybe I am missing something here.
Instead of lazy-loading at the page’s onload event you can attach onload handlers to the main page images and lazy-load the content when the main images have all finished loading (or in the simple case, attach an onload handler the the first carousel image and load everything else after that loads).
Thanks patrick for your suggestion.