Opera 11.5 image flicker
I have a teeny tiny little issue 开发者_C百科concerning a jQuery-based slideshow in Opera.
What I am doing is the following. I have a couple of images:
<div id="bg">
<img src="..." />
<img src="..." />
...
</div>
In the JS I am doing the following:
$('#bg img:visible').hide().next().show();
As I wait for all the images to be loaded before building the page this should create a non-noticeable transition from one picture to the next. This works perfectly fine in Chrome, Safari, Firefox and IE. Yet, in Opera I have a pretty long (probably 1/4 of a second) period where I see the (black) background shining through. I also tried doing this:
$('#bg img:visible').next().show().prev().hide();
but it made no difference so I guess this is a problem of Opera's engine.
Yet - and although I know this is nit-picking on an advanced level - I'd be interested if anyone encountered this before and maybe knows a workaround or fix?
Thanks!
Opera has a different way and timing of handling when it reflows/renders changes made in JavaScript--basically it tries to update JavaScript changes faster than the other browsers. See Efficient JavaScript from the Opera dev articles. Though I'm surprised that you're noticing that change. It could be due to the speed of your development machine combined with the size of the images, display driver, etc. What does it do on other machines? What about other versions of Opera?
Depending on your layout, you could try placing the second image under (via z-index) the first, then show() the second (even though it will be covered still at this time), then hide() the first which will then reveal the second that was underneath.
This seems pretty strange, and I am guessing it has something to do with the specifics of your implementation. Can create a jsfiddle that shows the problem?
Generally, though, using hide()...show() (or the other way around) has the potential to cause noticeable side effects. When something is hidden, the entire layout can change as the remaining visible elements consume the now-available space, and then change again when the next image is shown. These events happen in real time, so you are banking on things happening fast enough in whatever environment your user happens to be using, to make a seamless transition.
The only way to really be sure is to use absolute positioning for the two images (or generally, areas) in question. They should occupy the same physical space in the browser. Then do your show/hide. It doesn't really even matter which one has a higher z-index, either the new one will appear to the end user as soon as it is shown, or as soon as the other one is hidden.
I have resolved an Opera flicker problem (on loading a new html-page) by placing all
<script type="text/javascript" .....></script>
lines directly AFTER <head> in the Page.
If placed just before </head>
(or below ANY line or tag of html for that matter), the page will flicker on loading.
If all Javascript is placed just following <head> the page will not flicker.
加载中,请稍侯......
精彩评论