Javascript Image Reloading; мерцает
У меня есть изображение, out.jpg
обновляется более или менее каждую секунду. Я хочу, чтобы изображение отображалось в файле HTML и всегда было актуальным. Моим первоначальным решением было перезагрузить изображение каждые полсекунды. Это работало нормально, но изображение мигало белым на секунду во время загрузки.
Какие-либо решения?
Я попытался исправить это, загрузив изображение в отдельное скрытое <img>
тег, а затем загрузить его в видимое <img>
тег, и пусть он откроет его из кэша, устраняя мерцание. Это работало часть времени, но часто out.jpg
изменилось бы с момента загрузки скрытого тега и загрузки видимого тега... вызывая больше мерцания.
2 ответа
Как вы загружаете изображение?
вероятно, вам нужна какая-то техника предварительной нагрузки. Вы можете создать изображение в jquery и привязать к нему событие load (). только когда происходит событие, вы меняете img.src изображения в html
Вот как я это сделаю: сделать загрузку в скрытом div. Поместите событие в это изображение так, чтобы каждый раз, когда оно полностью загружалось, оно устанавливалось как src другого тега img или даже как фон a .
Тогда я бы проследил, чтобы после полной загрузки изображения отсчитывалось только 0,5-1 секунды, чтобы пользователи с медленным интернет-соединением (или с несколькими одновременными загрузками) не перезагружали новое изображение снова и снова.