IE7 Animated GIF Appears as a Static Image? - javascript

After a button is clicked to start a process on my web app, I show a small loading gif (animated) that rotates to indicate to the user something is happening. I put the gif img in place of the button like this using JQuery:
$('#btn_holder').html('<img src="images/loading2.gif" style="margin-left:40px; margin-top:7px;" />');
This works great in all browsers (Firefox, IE8, Chrome) except IE7 on a windows server 2003.
In IE, the gif appears but it is not animated. What's going on with IE7? How can I test what the problem is?
Thanks all

Maybe it's a problem with your IE7, (this happened to me before)
To enable animated GIFs, select "Internet Options" from the Tools menu and then click the Advanced tab. Scroll down to the Multimedia section, check the "Play Animations" option and click OK. From now on, you should only see the first frame of each animated GIF that loads.
Remember that IE will need to be restarted for the changes to take effect.
Other than that, there's a couple of solutions here: IE7's inanimate gifs.

Does this happen for all animated gifs or only animated gifs loaded in by Javascript? Try going to the url for the gif and seeing if it is animated then. If it is then instead of loading the image into the button, why not load it in HTML, hide it with CSS visibility:hidden and then unhide it with Javascript?

Related

Why won't my site display content images?

My website won't display images on http://teretana.mk/. When I open the debugging console in Chrome I get 2 errors which I do not understand at all.
It's also really weird if you go in a post like this one http://teretana.mk/2016/04/22/td_d_slug_20/ you can actually drag the blank image in Chrome (maybe in other browsers too) and the actual image will display.
In style.css your body.lazy-animation .td-animation-stack .entry-thumb, body.lazy-animation .post img rule has opacitiy: 0 which is hiding all the images. If you remove that then they show up.

Loading gif is not animating?

On a clients webpage, the page uses js/css to style a tree-style view to the desired look of the client. But on some of the pages with many objects it takes some time for the styles to load. So I suggested adding a loading screen.
Here is an example of the issue: http://zamozuan.com/content/16-search-auto-parts-by-vehicle-chevrolet
My client purchased a little animated icon they like that fits the theme of their site nicely.
I have a very simple addition to the script to add a loading icon, and then on $(document).ready, hiding the load element and showing the main element.
All works fine except the loading gif is not animating until AFTER the page has completely loaded.
It seems that the loop for the js is too intensive so the gif is not animating.
Before anyone chops my head off, I did view the similar questions on here, but those solutions do not work for me - the majority of issues are in IE and my issue is in chrome (not IE), and most of the other options are work-arounds based on clicking buttons to enable/disable, but in my case this is when the page initially loads so that is not viable.
I am wondering, is there any work-around to fix this? Is it possible to pre-load the gif in to an animated status and somehow prevent JS from interfering? Or is there a way to make the js loop not be so intensive that it completely freezes the browser?
As for the code, it is the exact as the link above, with only this added at the end:
$('#loading').hide();
$('.mainsearch').first().css('display', 'block');
The loading element just contains:
<img src="img/loading.gif" class="img-responsive">
<p class="centertext">Loading, please wait...</p>
But as mentioned, the gif does not load, just freezes.
For the javascript that is styling the tree, you can view it here:
http://zamozuan.com/js/tree.js
Any help would be greatly appreciated, as my client would not want to waste this loading icon they bought.
Thanks.
No, there is no work-around. It's not a problem with how the image is loaded, it simply won't be animated while the script is running.
Javascript is single threaded. As long as a script is running, there is no visual updates in the browser. This includes GIF animations, while the script is running animations won't move.
Without being able to work on the actual code and try it, I would suggest trying to break up your looping into separate callbacks. Maybe using setTimeout or requestAnimationFrame for every few recursions to give the browser a chance to update/paint.

Disappearing images in chrome

In a landing page for a chrome extension, after the user installs the extension I show a popup that has an explanation on how to proceed. The popup contains images (that are served from a different CDN), the popup uses css animations and transitions when it appears.
Sometimes (not sure exactly when), even though the images are loaded (and visible in the dev tools) they are not displayed in the popup. I have tried changing it from css background-images to elements, I've tried updating the images src after the extension is added, and also to remove some of the animations, but it doesn't seem to fix this issue.
http://live.rounds.com/x-factor/
has anyone encountered a similar issue and knows how to fix or bypass it?
I have deal with same issue and only that works for me was removing -webkit-backface-visibility:hidden; from animate.css body tag

How does IE work with contentless anchor tags?

I am trying to do a hover over effect on an image on a site that I am working on. I am having two problems with this. The first is browser specific and is my main worry.
Anchor tag problem:
When I view the site on Chrome, Safari and Firefox the tooltip (Jquery tools) works as expected. When viewed IE, the hover over is really strange. It seems as though the hover only is recognized when your mouse is over the outermost row of pixels (the border) on the anchor tag. The result is not being able to view the tool tip while in Internet Explorer. I have tried doing this in ways other than with Jquery tools, but even with the HTML event "onmouseover", the same effect happens.
I tried a few things while experimenting with this, and it seems that if I put something inside the anchor tag like some text, the text expands the hoverable area. This is interesting because this only happens in internet explorer.
For my environment, I am running on a 27" monitor with the latest Chrome, Firefox, Safari, and Internet Explorer 8 to test for compatibility.
Second z-index problem:
The second problem I am having is with the tooltip. It seems as though the tooltip, although styled with the highest z-index, goes behind an image of a school that I have infront of it. I figured that one of you might have a clue on what is going on with that, because I am stumped.
View the site
I put the site up and minimized it on jsfiddle.com. Here is the link to the project that I posted.
http://jsfiddle.net/keirp/B9Cgc/
Give your <a> some dimensions and/or display block or inline block. IE has trouble getting position for <a> when they are inline with nothing in them

Making an embedded Flash not stop when a Greybox overlay is opened on top of it

I'm working on a band website that has a Flash-based music player always visible. The idea is that the user can listen to the band's song as he is browsing through the site.
This has been working nicely, but in the weekend I started to work on a Greybox-based gallery for the site and ran into a serious issue. When an image is opened into the full Greybox view on top of the flash, the music stops. In fact, you can see through the overlay that the music player disappears completely until the Greybox overlay is closed. After the overlay is closed, you can select and play a track again.
This problem happens at least with newest Chrome and Firefox 5. For some reason, IE8 plays the track on the background fine.
Now, what could be causing this, and more importantly is there anything I can do to fix it? Any help would be most appreciated!
Just a FYI for those who might run into the same issue, Lightbox2 Lite did not have this issue (regular Lightbox did, though) and worked out of the box. This was in Drupal but I'd imagine the same applies elsewhere as well.

Categories