Javascript Image Reloading; мерцает

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

Какие-либо решения?

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

2 ответа

Решение

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

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

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

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

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

Другие вопросы по тегам