Javascript Image Reloading;мерцает

Question

У меня есть изображение, out.jpg, которое обновляется более или менее каждую секунду. Я хочу, чтобы изображение отображалось в HTML-файле и всегда было актуальным. Моим первоначальным решением было перезагрузить изображение каждые полсекунды. Это работало нормально, но изображение мигало белым на секунду во время загрузки.

Какие-нибудь решения?

Я попытался исправить это, загрузив изображение в отдельный скрытый тег <img>, а затем загрузив его в видимый тег <img> и открыв его из кэша, исключив мерцание. Это работало часть времени, но часто out.jpg менялось бы с момента загрузки скрытого тега и загрузки видимого тега ... вызывая больше мерцания.

Answer 1

Как вы загружаете изображение?

Возможно, вам нужна какая-то техника предварительной загрузки.Вы можете создать изображение в jquery и привязать к нему событие load ().только когда происходит это событие, вы меняете img.src изображения в html

http://api.jquery.com/load-event/

Answer 2

Вот как я это сделаю: сделать загрузку в скрытом div.Поместите событие в это изображение так, чтобы каждый раз, когда оно полностью загружалось, оно устанавливалось как src другого тега img или даже в качестве фона.

Тогда я бы просчитывал только 0,5Через 1 секунду после изображение полностью загрузилось, поэтому пользователи с медленным интернет-соединением (или с несколькими одновременными загрузками) не будут перезагружать новое изображение снова и снова.