jQuery / Javascript - get all images that are loaded

Question

This is the code I'm using to get all loaded images:

$("img").on('load', function() {
  console.log('Image Loaded'); 
}).each(function() {
    if(this.complete){
        //$(this).trigger('load'); 
        var img = $(this).attr('src');
        console.log(img);
    } 
});

but it's not working with those that are loaded with ajax afterwards, so I tried:

$(document).on('load', 'img', function(){
  console.log('Image Loaded'); 
}).each(function() {
    if(this.complete){
        //$(this).trigger('load'); 
        var img = $(this).attr('src');
        console.log(img);
    } 
});

but it's not doing anything, what would be the correct way? I need to manipulate the parent divs of each image that is freshly loaded, so getting just all images period on every ajax load would be overkill and not elegant

Your each() function is called on the $(document) object in your 2nd code sample, not the img elements. — Anthony McGrath, Mar 22 '20 at 01:55
Can you share more details on how you are loading images with ajax? If you are creating img elements and appending to the DOM, then you can use onload property as described [in this answer](https://stackoverflow.com/a/12355031/10567344)! — Ismajl Ramadani, Mar 22 '20 at 02:02
I create new dom elements with new img inside of them after ajax calls, so it's not about preset img where only src is updated or something — , Mar 22 '20 at 02:12

Anthony McGrath · Answer 1 · 2020-03-22T02:00:46.480

0

How about this?

$(document).on('load', 'img', function(){
     console.log('Image Loaded');
     var parent = $(this).parent(); //or .parents('div') or .closest('div'), etc..
     //do something with parent
});

edited Mar 22 '20 at 02:00

answered Mar 22 '20 at 01:58

Anthony McGrath

792
5
7

This is what I've tried at the beginning and it's not working – Mar 22 '20 at 02:00

Udo E. · Answer 2 · 2020-03-24T12:38:14.543

0

I will suggest that you create a function for getting images and also call the same function after ajax execution.

Edit

Pass an id or class string present in document or returned ajax data to limit the scope of the function

function getImages(id) {
    $('#' + id).find("img").on('load', function() {
        console.log('Image Loaded'); 
    }).each(function() {
        if(this.complete) {
            //$(this).trigger('load'); 
            var img = $(this).attr('src');
            console.log(img);
        } 
    });
}

getImages('outsideAjax'); // call during normal execution. outsideAjax is an id within your html document but not in the returned ajax data

$.ajax({
    // ajax settings
}).done(function() {
    // post ajax code
    // append returned data to document
    getImages('insideAjax'); // recall after successful ajax execution and appending of returned data. 'insideAjax' is an id inside your return ajax data 
}).fail(function(jqXHR, textStatus, errorThrown) {
    // report error
});

edited Mar 24 '20 at 12:38

answered Mar 22 '20 at 04:20

Udo E.

2,665
2
21
33

1

Well as I mentioned this is overkill because it parses all the images again, also the old ones. But when nobody will find a solution in which only newly loaded images are tracked then I will accept this answer – Mar 22 '20 at 08:10
@Pikaboo, the code is not triggering the onload handler method, it is only attaching it to Image DOM element. This is done immediately the DOM is ready. The handler method is only triggered after the image is completely loaded - in the case of ajax, only the images loaded via ajax will have their handler methods triggered. Also, if you know the `id` or `class` of any topmost element in the returned ajax data, you can pass it to the function to limit its scope. – Udo E. Mar 24 '20 at 12:27
Yes it should be like that but for my case it loaded all images on the page after each ajax call. Did you test it for yourself? It's really strange. The solution with onload right inside the element works perfect though – Mar 24 '20 at 13:06

score 0 · Accepted Answer · answered Mar 24 '20 at 13:01

This is how I solved it:

<img src="' + picUrl + '" onload="checkPic(\'' + picUrl + '\', this.naturalHeight, this.height);" class="pic">

Inside AJAX response.

I think it's self explanatory, works perfectly!

In the checkPic functuion I find this element by the src and get the parent elements and so on.

jQuery / Javascript - get all images that are loaded

3 Answers3