jquery .css() problem ...help please

I have a such code just entering start part for you

$(do开发者_运维技巧cument).ready(function(){
    //Dynamically size wrapper div based on image dimensions
    $("#tag-wrapper").css({width: $("#show_img").outerWidth(), height: $("#show_img").outerHeight()});

    //Append #tag-target content and #tag-input content
    $("#tag-wrapper").append('<div id="tag-target"></div><div id="tag-input"></div>');

Idea is that the css properties should immediately take place when the page is loaded. But... When I enter first time to the page, it doesnt work, when I refresh the page it works like it should. Any Idea how I can fix that?

Your code will work if show_img has a width and height set. I believe the reason why it is not working for you is because $(document).ready is called when the DOM is loaded and before the page contents. So at that point in time show_img has not been loaded yet, so it can not get the width and height unless you explicitly set it.

The images are probably not loaded when you try to take the width and height, so you must bind a function to the load event of the document, which will ensure that all images are loaded before executing:

$(document).load(function() {
    $('#tag-wrapper').css({
        width: $('#show_img').outerWidth(),
        height: $('#show_img').outerHeight()
    }).append('<div id="tag-target"></div><div id="tag-input"></div>');
});