Я получаю $ (изображение) .width () == 0, даже если поместить внутри $ (окно) .load

Question

Я хочу изменить размеры изображений, которые больше, чем у окна, но я продолжаю получать 0 ширину и высоту, когда я пытаюсь получить размер изображения.Я где-то читал, что это может быть потому, что изображения не обязательно загружаются в (документ). Уже, поэтому функции изображения должны идти в (окно) .load, но это бесполезно.Я настоящий новичок, когда дело доходит до jquery и javascript, поэтому я могу что-то делать не так.

Вот так выглядит мой файл javascript:

//<!--
$(document).ready(function(){
    ... 
});

$(window).load(function () {

    $(".lightbox img").each(function() {

        var width = $(this).width();
        var max_width = $(window).width()-30;
        var height = $(this).height();          
        var max_height = $(window).height()-30;

        if(width > max_width || height > max_height) {
            if(height > width) {
                height = max_height;
                width = Math.ceil(width / height * max_height);
            } else {
                width = max_width;
                height = Math.ceil(height / width * max_width);
            }
        }

        $(this).attr("width",width);
        $(this).attr("height",height);

    });
});

//-->

Заранее спасибо.

Answer 1

Взгляните на этот проект , который обеспечивает обратный вызов при загрузке изображений.

Еще одна причина, по которой вы не можете получить измерения, - это невидимый элемент (родительский или собственный).

Answer 2

Когда окно загружается, изображения еще не обязательно загрузились.JavaScript не может получить размеры изображения до тех пор, пока не будет загружено полностью , и до тех пор вы не получите вычисленное значение, равное нулю.

Учитывая это, может помочь повторяющийся цикл.(Предупреждение: не проверял)

var width = 0;
while (!width) {
    width = $(this).width();
}

Остерегайтесь бесконечных циклов.

Answer 3

Попробуйте $(this).css("width") вместо attr