проблема jquery .css () ... помогите пожалуйста

Question

У меня есть такой код, просто для вас вводится начальная часть

$(document).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>');

Идея состоит в том, что свойства css должны немедленно появляться при загрузке страницы. Но... Когда я впервые захожу на страницу, она не работает, когда я обновляю страницу, она работает так, как должна. Любая идея, как я могу это исправить?

Answer 1

Изображения, вероятно, не загружаются при попытке определить ширину и высоту, поэтому необходимо связать функцию с событием загрузки документа, который будет гарантировать, что все изображения загружены перед выполнением:

$(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>');
});

Answer 2

Ваш код будет работать, если show_img имеет ширину и высоту. Я считаю, что причина, по которой он не работает для вас, заключается в том, что $ (document) .ready вызывается при загрузке DOM и перед содержимым страницы. Таким образом, на данный момент show_img еще не загружен, поэтому он не может получить ширину и высоту, пока вы не установите его явно.