window.onload иногда срабатывает до того, как размер изображения будет установлен - PullRequest
Новая
       20

window.onload иногда срабатывает до того, как размер изображения будет установлен

0 голосов
/ 06 декабря 2011

Я использую jQuery, чтобы переместить изображения и текст в центр окна в небольшом слайд-шоу. Естественно, мне нужно подождать, пока изображения будут загружены, прежде чем делать это, в противном случае их размер будет равен 0, и изображение будет размещено слева вверху в середине страницы вместо правильного смещения.

Чтобы убедиться, что изображения загружены, я прикрепляю функцию javascript к $ (window) .load, например: 

$(window).load = start_slideshow()
function center() {
    e = $(this)
    e.css("position","absolute");
    e.css("top", (($(window).height() - e.outerHeight()) / 2) + $(window).scrollTop() + "px");
    e.css("left", (($(window).width() - e.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

function start_slideshow() {
    $(".text").each(center);
    $(".image").each(center);
    $(".slide").each(function() { $(this).hide() } );
    next_slide()
}

Это работает, большую часть времени. Однако иногда при обновлении изображение будет смещено от центра с его верхними левыми координатами в середине, как если бы оно не было загружено к моменту вызова javascrpt. Я вижу это, может быть, один раз в пять на мобильном Safari.

Я не делаю ничего особенного с изображениями: 

<div class="image">
    <img src="http://4.bp.blogspot.com/_OxhGU7eVQls/TQ_8RSFptmI/AAAAAAAAAF0/2pKKeDQEK1A/s1600/rainPA_468x409.jpg" />
</div>

window.onload должен быть после загрузки всех ресурсов, так почему бы иногда запускать javascript до того, как размер изображения будет установлен правильно? Как правильно загрузить все изображения, если window.onload не делает этого надежно?

Ответы [ 2 ]

2 голосов
/ 06 декабря 2011

Это должно быть: 

$(window).load(start_slideshow)

start_slideshow() немедленно выполнит функцию и присвоит возвращаемое значение функции свойству "load" $(window)

0 голосов
/ 06 декабря 2011

Вы используете jQuery.Вы не должны использовать $(window).load.

. Правильный способ запуска кода при загрузке страницы с помощью jQuery: 

$(document).ready( function() {
  ... your on load code here...
});

Так что в вашем случае вы должны написать: 

function center() {
    e = $(this);
    e.css("position","absolute");
    e.css("top", (($(window).height() - e.outerHeight()) / 2) + $(window).scrollTop() + "px");
    e.css("left", (($(window).width() - e.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

function start_slideshow() {
    $(".text").each(center);
    $(".image").each(center);
    $(".slide").each(function() { $(this).hide(); } );
    next_slide();
}

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

И, как примечание, вы не должны иметь привычку опускать ; в конце операторов, как вы это делали в исходном коде.Я исправил это в моем фрагменте.

...