Question

All my js scripts are working, but this is not working

 $("img").each(function() {
      if ($(this).height() > 100) {
        return $(this).after("<p class='tasr'>FOTO © TASR</p>");
      }
    });

When I load page, it’s not work, but when I copy this script do chrome-console, it work perfect.

My coffee script:

jQuery $(document).ready -> 
    $("img").each ->
        if $(this).height() > 100
            $(this).after("<p class='tasr'>FOTO © TASR</p>")

EDITED:

This is my dirty code: My javascript code from coffeescript

Answer 1

This might be down to the fact that the images havent finished loading yet and so return a height and width of 0.

You probably want to use .load() function on the image which will be triggered once the image loads and therefore will have a width and height greater than 0.

This would also explain why it is working in the chrome console since by then the images will have loaded.

EDIT: Something worth noting mentioned by @zzzzBov in a comment below is that the cache in browsers will often stop the image calling the load function on a standard refresh. To get around this you just need to have a function with all your code in which you call from both the .load function and inside the document ready function

If this is your html:

<img id="img1" src="example.jpg" />

Then you can write something along the lines of this in your script. Note this is off the top of my head so it might be slightly wrong.

function doStuff() {
    //I normally do a check here to see if the image width/height is 0 if it is then I dont bother
    //executing the rest

    //I do however sometimes need to do stuff when the image has not yet loaded which can be done here.

    //do stuff with the image, you could also pass parameters if needed.
}

$(document).ready(function() {
    doStuff();
});

$('#img1').load(function() {
    doStuff();
});