緩存站點的Jquery.animate問題

Question

我有一個div，當你來到頁面時，它會自動從頁面上以.animate的形式滑動。我有它的第一次訪問工作，但是當該網站被緩存，你重新訪問，功能似乎不會觸發。一些刷新最終會再次發生，但我需要它是可靠的。

它似乎是我需要能夠「重置」該腳本，所以即使在它再次觸發的緩存站點上。

這是我現在運行的腳本。

$(document).ready(function(){ 

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

}); 

的IMG是位置：絕對的，掀起了頁面的CSS

我試圖這樣做的幾種不同的方式，但我也需要形象的問題之前加載它是滑入的。不希望它成爲最後一件事。

我也試過

$(document).ready(function() { 

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

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

    }); 

}); 

同樣的結果，如果網站被緩存，它不會火，但一重裝將得到它的工作。

如果任何人有任何幫助，我將不勝感激，謝謝！

Answer 1

你可以試試這種方法：

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

這將迫使圖像每次重裝。

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

Answer 2

當圖像被高速緩存，它是「加載」的的document.ready閃光之前（即負載事件觸發）。

您可以使用$（「＃logo_fixed img」）。live而不是.bind。將代碼放在document.ready函數之外。

我會做到以下幾點：

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") 
    } 

}); 

不是最簡潔的代碼，大概可以提高一點，但是這將確保你的動畫不會觸發事件關閉太早（等待，直到」 document.ready），但會考慮document.ready之前的圖像加載。