Пользовательский интерфейс jQuery: диалог загрузки при загрузке изображений

Question

У меня есть веб-сайт, созданный в ASP.NET MVC3 с видом рендеринга Razor. На этом сайте я создаю диаграммы (System.Web.UI.DataVisualization.Charting.Chart) и представляю их в виде изображений с контроллером для моего представления.

Загрузка графиков может занять от 1 до 5 секунд. Поэтому я хочу показать модальное диалоговое окно загрузки, чтобы дать некоторую обратную связь пользователю.

Создание диалогового окна jQuery UI очень просто, и я слышал о решениях с временным закрытием. Тем не менее, закрытие с задержкой по времени не является правильным решением в моем случае из-за изменения времени.

Можно ли показать одноразовое диалоговое окно загрузки , пока каждое изображение на странице не будет загружено и отображено браузером? Как я мог это сделать?

Спасибо! :)

Answer 1

Вы можете добавить обработчик к Load Event

Добавить абсолютный позиционный div над img (через css), который покажет загрузочный img.Добавьте обработчик события загрузки в тег img, который должен удалять абсолютный позиционный div при запуске события загрузки.

Answer 2

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