Delay loading of GIF

Question

I am working for a designer who has created a GIF that only has one cycle of an animation. This gif actually appears about halfway down a scrolling page, i.e it starts off screen, so by the time you get there the animation has already fired.

I have created two versions of this GIF, one in it starting state, and the animated one.

I want it so that when the user scroll down the page, the animated GIF loads at the appropriate time (i,e when its on screen), and then loads the animated version into the DOM which then plays

I have tried using scrollspy, but this only delays the showing of the icon, and not the actual loading, so when it appears as the user scrolls down the animation has already been and gone.

Is it possible? My common sense is telling me that this is not even worth the dev time as its not even that important an animation, and should just be on a loop like most normal GIF's but.. well.. thats designers for ya!

Static version = step_4.gif
Animated version = step_4_b.gif

All encapsulated in a

Thanks in advance for any assiatance

NOTE : Using the answer below, this was my working piece of code (needs tidying, and the plugin was installed)

jQuery(document).ready(function($) {

window.onscroll = function() {
if($("#printer_animated_image").visible()) { //this determines if the element is visible
$("#printer_animated_image").attr("src", "images/modules/how_it_works/step_4_b.gif"); //this sets the image source
}
}


});

</script>

First of all, it's better to preload that animated gif: http://stackoverflow.com/a/14390213/104380 — vsync, Jun 05 '14 at 10:23

john · Accepted Answer · 2014-06-05T10:19:10.600

1

This is what you are looking for

You can download the jquery plugin from that site then write an onscroll handler like this:

window.onscroll = function() {
    if($('#element').visible()) { //this determines if the element is visible
        $('#element').attr("src", "step_4_b.gif"); //this sets the image source
    }
}

In the above #element needs to be replaced with the ID of the image.

Also if you don't want to install a plugin just for a single image JQuery has a built in feature that is similar, but not as complex:

window.onscroll = function() {
    $('#element:visible').attr("src", "step_4_b.gif");
}

Which does the same thing, but if the image has been made invisible with CSS it will still be considered visible in this version.

edited Jun 05 '14 at 10:19

answered Jun 05 '14 at 10:09

john

157
2
6

Look forward to trying this soon, appreciate the detailed choices! – MOLEDesign Jun 05 '14 at 10:22
Tried both methods, put the scripts after the element has been drawn, and initially no errors, but as soon as I start scrolling i get 'Cannot read property 'visible' of null' .. i have confirmed 100% that I have an – MOLEDesign Jun 05 '14 at 14:35
I suspect the script is firing before the DOM is ready, but i have to enclose the script with the body (CMS) for now. SUspect I need to put a $(document).ready(function() { around the statment, but that is giving me strange errors – MOLEDesign Jun 05 '14 at 14:51
Got it. CMS was loading jQuery using noConflict(), so I could not use $. I encapsualted the script in `code` – MOLEDesign Jun 05 '14 at 15:07

score 1 · Answer 2 · edited May 23 '17 at 10:32

First of all, it's better to preload that animated gif: https://stackoverflow.com/a/14390213/104380

Then you must check if DOM element where the GIF is supposed to be is visible to the user. you can simply check this elm.getBoundingClientRect().top < 0 on every scroll and then inject that GIF image where it should be.

var elm = getElementById('#elm');
$(window).on('scroll.reached', placeLoadingGIF);

function placeLoadingGIF(){ 
   if( elm.getBoundingClientRect().top < 0 ){
       var img = new Image();
       img.src = 'step_4_b.gif';
       elm.appendChild(img);
       $(window).off('scroll.reached');
   }
}

Something of this sort.

i will try this as well, thanks for taking the time to reply with a fully detailed explanation — MOLEDesign, Jun 05 '14 at 11:45

Delay loading of GIF

2 Answers2