0

After user take action I get related images from server and show to user. I dynamically insert these images under html element (div). After all of the images are completely loaded I want to run some script. Here is my sample code:

var images = []; //array of image urls
$(document).on('someEvent', function(){

$.each(images, function(){
    $('#imagesList').append('<li><img src="' + this + '" /></li>');
}); });   
$('#imagesList').on('load', function(){ $(this).show(); });

The load event is not firing. Also, is the load event is right event if some images was cached previously and some was not?

I don't understand how my question can be related to How can I be notified when an element is added to the page? this post.

I need to run script after all dynamically added images are loaded within div element

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Nuryagdy Mustapayev
  • 667
  • 1
  • 7
  • 27
  • Possible duplicate of [Event when element added to page](https://stackoverflow.com/questions/7434685/event-when-element-added-to-page) – Guillaume Georges Jun 05 '18 at 14:43
  • Have you tried `$("#imagesList").load(function() {`? –  Jun 05 '18 at 14:56
  • yes this is throwing "Uncaught TypeError: a.indexOf is not a function" error on "$("#imagesList").load(function() {" this line: https://jsfiddle.net/6rbdmq31/7/ – Nuryagdy Mustapayev Jun 05 '18 at 15:00
  • Can you put attribute or a class to the last created img object? – SG52 Jun 05 '18 at 15:07
  • If you can put classname to the last created img object, than this script might help you : https://jsfiddle.net/3d7qy49k/ – SG52 Jun 05 '18 at 15:14
  • I guess your code detects change in DOM tree, it will not run when image is loaded, it will run when image is added to DOM. Also last image is not a solution because some of the images loaded at the beginning can have significantly larger size that may cause it is load the last – Nuryagdy Mustapayev Jun 05 '18 at 15:20

0 Answers0