Question

I’m using a wonderful plugin computedstyle.js that gets the computed style of objects.
It allows me to manipulate the css of things you shouldn’t normally be able to, like constructed images.

I’m able to take an image source which is found in a link, and change the size of the housing div and of the image itself. Usually you can only do that if you know the size of the image.

1. I construct the image
2. I size the image
3. I then size the iframe around it, based on the size of the changed image.

This works in Chrome and Safari, but of course, not Firefox, which in my opinion is fast becoming the new Internet Explorer.

The question, is there a way I can make firefox wait to notice the change and then do the resizing of the iframe?

TO see it work correctly in Chrome and Safari, go to http://syndex.me. And not correctly, Firefox.

Not a must for the question, but if you are wondering what I’m doing, I’m removing the default gallery preview of Tumblrs Photoset Post and replacing it with a single image.

if($(this).find('.html_photoset').length){
    $(".html_photoset").find("iframe").load(function(){
        var myFrame=$(this);                        
        $(this).contents().find('.photoset_row:not(:first-child)').each(function(){
            $(this).remove();
        })
    var psPre = $(this).contents().find('.photoset_row').find('a').attr("href");
    $(this).contents().find('.photoset_row').children(':not(:first-child)').remove();
        $(this).contents().find('.photoset_row').children(':first-child').children().remove();
        $(this).contents().find('.photoset_row').find('a').append("<img src='"+psPre+"'alt='Cover Page' />");
        $(this).contents().find('img').load(function(){
            var myCSS = $(this).getCSS(); //this is the plugin function
            var myY = myCSS.height.slice(0, - 2);
            var myX = myCSS.width.slice(0, - 2);
            $(this).closest(".photoset_row").css({height: myY});
            $(this).closest(".photoset_row").css({width: myX});
            $(this).css({maxHeight: (heightRef-0)});
            $(this).css({maxWidth: "auto"});
                    //after I've made the fixes to the image, I redo it for the iframe:
            var myCSS2 = $(this).getCSS();
            var myY2 = myCSS2.height.slice(0, - 2);
            var myX2 = myCSS2.width.slice(0, - 2);
            myFrame.height(myY2);
            myFrame.width(myX2);
            console.log(myY2);
        })                      
})
}

Answer 1

This caveat on the .load() jQuery docs page is interesting:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load()
shortcut is to execute a function when an image (or collection of
images) have completely loaded. There are several known caveats with
this that should be noted. These are:

It doesn’t work consistently nor reliably cross-browser

It doesn’t fire correctly in WebKit if the image src is set to the same src as before

It doesn’t correctly bubble up the DOM tree

Can cease to fire for images that already live in the browser’s cache

So, to try and mitigate some of these, I would suggest trying to append a random query string to the end of the image href to avoid it being cached, and avoid the src being set to the same as before, etc.

i.e. change the psPre line to:

var psPre = $(this).contents().find('.photoset_row').find('a').attr("href") + '?' + (Math.random() * 1000000);