Javascript Image Reloading; flickers

北城以北 提交于 2020-01-17 05:19:27

问题


I have an image, out.jpg, that is updated more or less every second. I want the image displayed in an HTML file, and always up to date. My original solution was to reload the image every half second. This worked fine, but the image would flicker white for a second while it was loading.

Any solutions?

What I tried to do to fix this was to load the image into a separate hidden <img> tag, and then load it into the visible <img> tag, and let it open it from the cache, eliminating the flickering. This worked part of the time, but often the out.jpg would have changed from the time the hidden tag loaded it and the visible tag loaded it... causing more flickering.


回答1:


how are you loading the image?

probably some preload technique is what you need. you can create an image in jquery and bind the load() event to it. only when that event fires do you swap the img.src of the image in the html

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




回答2:


This is how I would do it: make the load in a hidden div. Place an event on that image so that each time it becomes fully loaded, it gets set as the src of another img tag or even as a background of a .

Then I would make sure only to count down 0.5-1 seconds after the image has fully loaded, so that users with slow internet connections (or with a few simultaneous downloads) won't be reloading a new image again and again.



来源:https://stackoverflow.com/questions/5098276/javascript-image-reloading-flickers

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!