gif banner animation loads randomly in mobile

Hi, I have an gif animation banner overlay on http://www.telstra.com.au/deals page. This loads fine in desktop. in small screen devices and mobile the animation is showing up randomly. Sometimes gif loads animation doesnt play and will show up the html banner beneath it.

any idea why this is happening
Perumal_RMAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
open this image in your browser : http://www.drodd.com/images15/numbers15.jpg
test page : https://jsfiddle.net/q46amj2h/

So it's not a GIF but here you can do what you want and have the hand on the animation to be sync.

<div id="countdown">
  <a href="#">
    <img src="http://www.drodd.com/images15/numbers15.jpg" class="img10" width="1600" height="1200" />
  </a>
</div>

Open in new window


jQuery(function($) {
	var counter = 10;
	$("#countdown img").load(function() {
		var t = setInterval(function() {
    	counter--;
      if(counter<1) 
      	clearInterval(t);
      else
    		$("#countdown img").attr("class", "img"+counter);
    }, 1000);		 	
  });
});

Open in new window


#countdown a {
    width: 364px;
    height: 364px;
    overflow: hidden;
    display: block;
    position: relative;
}
#countdown img {
    position: absolute;
    border: 0;
}
.img1  {
    top: 0;
    left: 0;
}
.img2  {
    top: 0;
    left: -417px;
}
.img3 {
    top: 0;
    left: -829px;
}
.img4 {
    top: 0;
    left: -1236px;
}
/* SECOND LINE */
.img5 {
    top: -410px;
    left: 0;
}
.img6 {
    top: -410px;
    left: -417px;
}
.img7 {
    top: -410px;
    left: -829px;
}
.img8 {
    top: -410px;
    left: -1236px;
}
/* THIRD LINE */
.img9 {
    top: -836px;
    left: 0;
}
.img10 {
    top: -836px;
    left: -417px;
}

Open in new window

0
 
NerdsOfTechTechnology ScientistCommented:
What's its the  file size, and dimensional size, of the gif; and which responsive css framework, if any,  are you using?
0
 
NerdsOfTechTechnology ScientistCommented:
That's probably the issue then. Some mobile devices won't allow Javascript/jQuery/etc . Therefore the best approach would be to slice the image up and make an actual .gif of it. Use Photoshop or your favorite image editor to do this or create an extremely low budget gig for an expert to do it for you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.