search

GoogleChromeLabs / wp-native-lazyload

WordPress plugin to lazy-load media using the native browser feature.
https://wordpress.org/plugins/native-lazyload/
Apache License 2.0
51 stars 13 forks source link

Images are not being loaded if content is added via Ajax #1

Closed mbaierl closed 5 years ago

mbaierl commented 5 years ago

Issue Overview

When using the prev/next buttons on a blog page no images are shown on the previous/next page.

Steps to Reproduce (for bugs)

  1. open https://mbaierl.com/blog/page/2/
  2. scroll to the bottom
  3. click on either « Ältere Einträge (prev) or Nächste Einträge » (next)
  4. no images are preloaded on the resulting page. I am using Chrome 76.0.3809.132 (Official Build) (64-bit) on the latest MacOS.

Expected Behavior

Images should load.

Current Behavior

The image is not loaded and the image tag remains like this: <img src="https://mbaierl.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg" alt="Vorsicht! Diese 15 Bücher könnten dein Business (und dein Leben) verbessern!" class="lazy" width="1080" height="675" loading="lazy" data-src="https://mbaierl.com/wp-content/uploads/1/business-buecher-og-1080x630.png">

felixarntz commented 5 years ago

Thanks for the report @mbaierl!

I think the most error-proof way to fix this is to disable the transformation of images when content is fetched via Ajax (by checking whether doing_ajax() or x-requested-with: XMLHttpRequest header is present).

This would mean images loaded via Ajax are not lazy-loaded, but this action is not predictable for the plugin, so it would require developer intervention (e.g. trigger an event that the Native Lazyload plugin knows it should recheck for new images). I prefer going with the safer solution first. Last but not least, if you load via Ajax, these images aren't "strictly" immediately loaded anyway.

What do you think?