Jquery .animate проблемы с кэшированным сайтом - PullRequest
Новая
       2

Jquery .animate проблемы с кэшированным сайтом

0 голосов
/ 02 февраля 2011

У меня есть div, который скользит со страницы с .animate автоматически, когда вы приходите на страницу.У меня это работает при первом посещении, но когда сайт становится кэшированным и вы снова посещаете, эта функция, похоже, не срабатывает.Несколько обновлений в конечном итоге приводят к возобновлению работы, но мне нужно, чтобы он был надежным.

Похоже, мне нужно иметь возможность "сбросить" сценарий, чтобы даже на кэшированном сайте он снова запускался.

Это скрипт, который я сейчас запускаю. 

$(document).ready(function(){

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

});

img is position: absolute и отключен от страницы в css

Я пробовал несколько разных способовделать это, но у меня есть проблема с необходимостью загрузки изображения перед его вставкой. И я не хочу, чтобы оно появлялось последним.

Я также пытался 

$(document).ready(function() {

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

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

    });   

});

Те же результаты, если сайт кэшируется, он не сработает, но перезагрузка заработает.

Если кто-нибудь поможет, я был бы очень признателен, спасибо!

Ответы [ 2 ]

0 голосов
/ 02 февраля 2011

Когда изображение кэшируется, оно «загружается» (т. Е. Происходит событие загрузки) до того, как сработает 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), но учитывает загрузку изображения перед документом. готовый.

0 голосов
/ 02 февраля 2011

Вы можете попробовать эту технику: 

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

Это заставит изображение каждый раз перезагружаться.

Как перезагрузить / обновить элемент (изображение) в jQuery

...