Doesn't load after dynamically inserted images
See original GitHub issueSome browsers (including Safari for iOS) doesn’t recognize WebP image format. So, i want to use Modernizr lib to detect if i will deliver PNG/JPG or WebP.
The code to insert the new data-src works, but i want to use it with LOZAD, but, it doesn’t load that images dynamically inserted.
// * Lozad
const observer = lozad();
observer.observe();
// * jQuery
$(function() {
// * Modernizr
Modernizr.on('webp', function (result) {
if(result) {
$("img").each(function() {
imgDelivery = $(this).data("webp");
$(this).attr("data-src", imgDelivery);
});
}
else {
$("img").each(function() {
imgDelivery = $(this).data("original");
$(this).attr("data-src", imgDelivery);
});
}
observer.observe(); // * Doesnt load the new images inserted above
});
});
Tested on: Chrome, Safari for osx 12.0.02, Opera, Safari for iOS
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:5
Top Results From Across the Web
Load event for dynamically added images are not firing
Load event for images added dynamically to #div are not working, whereas other events like click/mouseover etc are working fine. <div id="test"> ...
Read more >Loading image is not displaying on dynamically created HTML ...
I am dynamically creating HTML page to show User Information. I have added loading image to show the image until data loads properly....
Read more >Page: DOMContentLoaded, load, beforeunload, unload
Scripts that are generated dynamically with document.createElement('script') and then added to the webpage also don't block this event.
Read more >Preventing Content Reflow From Lazy-Loaded Images
Lazy loading doesn't guarantee that the image will fully load before it enters the viewport. The result is a perceived janky experience, ...
Read more >Dynamically Loaded Images Won't Render - Ionic Forum
After upgrading to Ionic version 1.0.0-beta.14, my dynamically generated images no longer render. The image links are pulled in from a ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
In this code, I run the lozad after attach data-src to each image after completed the jquery each Working fine for me.
Just a blind guess: add the
lozad
class dynamically (= when you setdata-src
attribute).Based from presence of
data-loaded
attribute, I guess that Lozad marks the image as loaded (even if there is nosrc
and thus there’s nothing to load) and does not load the image after you adddata-src
to it.