Неверное вычисление позиции диалогового окна из-за динамической загрузки изображения?

Question

Я работаю над приложением типа галереи - один шаблон объединяет всплывающее диалоговое окно для большего просмотра миниатюр при щелчке. Путь сервера к изображению включен как переменная шаблона.

Gallery.Templates.Popup = "\ 
    <div class='popup'>\ 
     <img class='popup-image' src='{{image-path}}' />\ 
     <div class='name'>{{name}}</div>\ 
     <div class='caption'>{{caption}}</div>\ 
     <div class='dimensions'>{{dimensions}}</div>\ 
     <div class='price'>{{price}}</div>\ 
    </div> \ 
"; 

Это работает очень хорошо, ЗА ИСКЛЮЧЕНИЕМ, когда изображение загружается впервые. Диалог сконструирован и показан, но в то время, когда строка html привязана к dom, ему не хватает изображения. Проблема это вызывает в позиционировании диалог:

диалоговое окно, расположенное в центре экрана, как это: левый = window.width/2 - dialog.width/2

Но поскольку изображения нет, переменная dialog.width неверна. Опять же, это происходит только при первом щелчке эскиза, я предполагаю, что изображение кэшируется для последующих кликов.

Будет ли это обработано путем предварительной выборки изображений? Если да, то они должны быть привязаны к dom для кэширования или я могу просто загрузить их в массив?

Большое спасибо!

Answer 1

Если вы можете получить размер изображения досрочно с сервера, вы можете использовать его, чтобы помочь вам соответствующим образом подобрать div .popup.

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