How can I select an img placed within a span with appendChild?

Question

I'm using picturefill.js (Scott Jehl): https://github.com/scottjehl/picturefill/blob/master/picturefill.js

Here's how I have it setup, (some code omitted b/c it was just more media query stuff) using span tags and data attributes as in his documentation:

<figure>
    <a href='http://www.casaromeromexican.com'>
        <span id="picture" data-picture data-alt="Casa Romero Mexican website">
        <span data-src="img/casa-romero-mexican.jpg"></span>
        <span data-src="img/casa-romero-mexican@2x.jpg" data-media="(min-device-pixel-ratio: 2.0)"></span>
        <span data-src="img/casa-romero-mexican-md.jpg" data-media="(min-width: 768px") </span> 
// and so on...

The correct img is being loaded and placed on the page, as expected. Here's is a snippet of the generated HTML:

<span data-src="img/casa-romero-mexican-md.jpg" data-media="(min-width: 768px)"><img alt="Casa Romero Mexican website" src="img/casa-romero-mexican-md.jpg"></span>

What I'd like to do is add a class to whichever img tag ends up getting generated.

However, I'm not even able to select the img that is appended! Here's what I'm working with:

alert(($('#picture').children().find('img').size()));

This returns 0, even though the image is on the page. I am expecting it to return a size of 1, b/c based on the media queries, 1 of the images is appended to the page with picturefill.

Just to be sure that there wasn't issues with the DOM loading, I placed picturefill.js in the header (even though JS should go in footer most of the time), and even did this:

$(document).ready(function() {
        alert('ready!');
        alert(($('#picture').children().find('img').size()));
        });

Still doesn't seem to find the img.

how about `$('#picture img')` and if you want the last one just `$('#picture img:last')` — Hussein Nazzal, Oct 03 '13 at 22:31
and you have span tags not img tags .. so why are you search for something that isnt there .. — Hussein Nazzal, Oct 03 '13 at 22:34
Are you loading whichever file houses the `alert()` before `picturefill.js` in the DOM? — elkirkmo, Oct 03 '13 at 22:35
@HusseinNazzal Picturefill generates an `img` tag inside the `span`. He included what the user-facing HTML looks like and it has an actual `img`. — elkirkmo, Oct 03 '13 at 22:38
@elkirkmo I added a document ready, and another alert to be sure, but it still doesn't find the img. I also have picturefill.js in the head (most of the time I put JS in footer). So, I don't think the 'timing' is the issue. — CodeFinity, Oct 03 '13 at 22:38
@HusseinNazzal Nope, still doesn't select the img. The alert still says 0, like it doesn't realize that there is an img tag within that span! Ugh! — CodeFinity, Oct 03 '13 at 22:44
@HusseinNazzal I see what you mean. However, you are using that for a situation where the is already in the HTML, in which case there is no problem. With picturefill.js, the tag is appended dynamically to the HTML after the page is loaded, and for some reason, this is making it difficult to select it. If it was just some HTML with the already there, your solution would be fine. — CodeFinity, Oct 03 '13 at 23:16
In the [github documentation](https://github.com/scottjehl/picturefill#how-the-img-is-appended) they say you can assign each `span` it's own class. Have you tried doing that and then calling $(span.class img)? — elkirkmo, Oct 03 '13 at 23:40
I did see that in the docs, and am able to manipulate via CSS without too much trouble. Anyway, as it turns out...one of your earlier comments was correct. Even the DOM was ready (with 'document ready'), the img itself was not on the page. When I actually used 'window load,' it works just fine! Reading this helped me understand: http://learn.jquery.com/using-jquery-core/document-ready/ — CodeFinity, Oct 03 '13 at 23:43

score 0 · Accepted Answer · answered Oct 03 '13 at 23:46

http://learn.jquery.com/using-jquery-core/document-ready/

After reading this, I understood why jQuery was not finding the img. In this case, it was necessary to use $( window ).load(function() { ... }). This will not run the script until the entire page is loaded, as opposed to $( document ).ready(), which only waits for the DOM.

In other words, $( document ).ready() is fine most of the time, but not when waiting on media elements that may take longer to load and/or need to be fetched with a request!

How can I select an img placed within a span with appendChild?

1 Answers1