Jquery .animate issues with cached site

Question

I have a div that is being slide from off the page with .animate automatically when you come to the page. I have it working on first visit, but when the site becomes cached and you revisit, the function seems not to fire. A few refreshes eventually gets it going again but I need it to be reliable.

It seems to be that I need to be able to "reset " the script so even on a cached site it fires again.

This is the script I'm running now.

$(document).ready(function(){

    $("#logo_fixed img").bind("load", function () { $(this).animate({"left": "+=434px"}, "slow"); });

});

The img is position:absolute and set off the page in the css

I have tried a few different ways of doing this, But I have the issue of also needing the image to be loaded before it is slide in. And don't want it to be the last thing to come up.

I also tried

$(document).ready(function() {

    $('#logo_fixed img').load(function(){

        $(this).animate({"left": "+=434px"}, "slow")

    });   

});

Same results, if the site is cached it wont fire, but a reload will get it working.

If Anyone has any help I would greatly appreciate it thanks!

can you check to see if the image is loaded, and if it is, run the same animation? — Brandon Frohbieter, Feb 02 '11 at 07:33

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

You could try this technique:

$(document).ready(function() {
    $('#logo_fixed img').load(function(){
        $(this).animate({"left": "+=434px"}, "slow")
    });
    d = new Date();
    $("#myimg").attr("src", $("#myimg").attr("src")+d.getTime());
});

That would force the image to reload each time.

How to reload/refresh an element(image) in jQuery

edited May 23 '17 at 10:33

Community

1
1

answered Feb 02 '11 at 07:50

Jared Farrish

48,585
17
95
104

score 0 · Answer 2 · answered Feb 02 '11 at 08:10

When the image is cached, it is "loaded" (ie the load event fires) before the document.ready fires.

You can use $("#logo_fixed img").live instead of .bind. Put the code outside the document.ready function.

I would do the following:

var logoLoaded = false;

$("#logo_fixed img").live("load", function () { logoLoaded = true });

$(document).ready(function() {

   if(!logoLoaded){

        $('#logo_fixed img').load(function(){

             $(this).animate({"left": "+=434px"}, "slow")

        });
   }    
   else
   {
        $('#logo_fixed img').animate({"left": "+=434px"}, "slow")
   }

});

Not the most succinct code, and probably can be improved a bit, but that will ensure that your animate event doesn't fire off too early (waits 'till document.ready) but takes into account the image loading before document.ready.

Jquery .animate issues with cached site

2 Answers2