Javascript неправильно загружает изображения в Firefox v8 - v11

Question

Я подключаю веб-сайт, посвященный фотографии, и в FF8 до 10 я работаю неправильноза пиктограммами, а также слишком далеко вниз по странице (почти за пределами сайта).

Я тестировал во множестве других браузеров и могу воспроизводить его только в FireFox.Его легче воспроизвести в FF или OS X, но мне сказали, что это происходит (но реже) в FF для Windows 7.

Вот мои текущие тесты.

ОС -------- Браузер -------- Статус

Win7 ------ IE 9 --------------
Win7 ------- Chrome 17 -----
Win7 ------- FireFox 10 -----
Win7 ------- FireFox 11 -----
OS X ------- Chrome 17 ----
OS X ------- Safari 5 ----------
OS X ------- FireFox 8 -------
OS X ------- FireFox 11 -----

Вот промежуточный сайт http://captures.infinitas.ws

А вот скриншот проблемы

Проблема в том, что это настолько странно, что я не знаю, с чего начать искать проблему.

Вот некоторые соответствующие фрагменты кода.

Javascript

function centerMe(img, show, container) {
    var img$ = $(img);
    container = container || img$.parent();
    var deltaW = Math.round((container.width() - img.width) / 2);
    var deltaH = Math.round((container.height() - img.height) / 2);
    img$.css({top: deltaH, left: deltaW});    
    if (show) {
        img$.css("visibility", "visible");
    }
}

$(document).ready(function (){
    var imgs = [];
    $('a.thumb').each(function () {
        var img = new Image();
        img.src = this.href;
        imgs.push(img);
    }).click(function() {
        var container = $("#gallery > div");
        var oldImg = container.find("img");

        var img = new Image();
        img.src = this.href;
        var newImg = $(img).hide();
        container.append(img);
        centerMe(img, false, container);

        oldImg.stop(true).fadeOut(500, function() {
            $(this).remove();
        });
        newImg.fadeIn(500);
        return false;
    });
});​

Таблица стилей

#content
{
    position: relative;
    width: 1160px;
}

#gallery
{
    position: absolute;
    width: 1160px;
}

#gallery > div
{
    position: relative;
    width: 800px;
    height: 600px;
    text-align:center;
    vertical-align:middle;
}

#gallery > div  > img
{
    position: absolute;
}

/*Gallery Navigation*/
#gallery > ul
{
    position: absolute;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style-type: none;
    vertical-align: top;
    width: 320px;
    top: 0;right: 0;
}

#gallery > ul > li
{
    list-style-type: none;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
    padding-top: 3px;
}

HTML

   <div id="gallery">
        <div>
            <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/L/CAP0029-L.jpg"
                onload="centerMe(this, true)" style="visibility: hidden" />
            <noscript>
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/L/CAP0029-L.jpg" />
            </noscript>
        </div>
        <ul>
            <li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/L/CAP0029-L.jpg"
                target="_blank">
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/Ti/CAP0029-Ti.jpg" /></a></li>
            <li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-Hp2qmZC/0/L/CAP0284-copy-L.jpg"
                target="_blank">
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-Hp2qmZC/0/Ti/CAP0284-copy-Ti.jpg" /></a></li>
            <li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-qG9wB77/0/L/CAP0167-L.jpg"
                target="_blank">
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-qG9wB77/0/Ti/CAP0167-Ti.jpg" /></a></li>
            <li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-ZxNk2zh/0/L/CAP0097-L.jpg"
                target="_blank">
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-ZxNk2zh/0/Ti/CAP0097-Ti.jpg" /></a></li>
            <li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-j6tmqHJ/0/L/amanda-005-L.jpg"
                target="_blank">
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-j6tmqHJ/0/Ti/amanda-005-Ti.jpg" /></a></li>
        </ul>
    </div>

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

Answer 1

Вы устанавливаете .src на изображение и сразу пытаетесь прочитать его размеры (в centerMe). Согласно текущему тексту спецификации HTML5, который реализует Firefox, измерения обновляются асинхронно из набора src. Выполнение зависящих от размера вещей из события загрузки изображения должно работать.

В спецификации возникла проблема, заключающаяся в том, что эта спецификация, по-видимому, не совместима с Интернетом, и есть некоторые разработки Firefox на https://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/bzbarsky@mozilla.com-7f8434f967df/try-macosx64/, поведение которых изменилось, чтобы соответствовать другим браузерам. Возможно, стоит протестировать тех, кто находится на вашем сайте, чтобы выяснить, решают ли они проблему.

Answer 2

Мне кажется, что Firefox не ждет загрузки вашего документа, поэтому обработчики событий неправильно подключаются.

Когда я смотрю на реальный код в Firefox, я вижу это:

$(document).load()

когда это должно быть:

$(document).ready()

в конце site.js.

Кроме того, этот код выглядит несколько минимизированным (все отступы удалены и многиепеременные переименованы).Я бы посоветовал отладить приложение до минимизации, поскольку его минимизация усложняет отладку.Когда все везде работает правильно, вы можете свернуть его и проверить еще раз.