jquery slide down image на странице load

Question

У меня нет опыта работы с jquery (или java-скриптом), но при попытке сделать изображение (img id=mike ...) заходит, когда загружается страница.

После просматривали Jquery документов и пытаются запросы Google, я до сих пор придумать с этим

$(document).ready(function() { 

$("#mike").load(function() { 
     $(this).show("slide", { direction: "up" }, 2000); 

}); 

    }); 

И применил CSS display:hidden так что остается скрытой, пока я не хочу, чтобы скользить на странице загрузке.

Это не работает, если я не перезагрузите страницу.

Надеясь кто-то может помочь мне с этим, пожалуйста :)

Answer 1

.load() не срабатывает, если изображение извлекается из кэша, в зависимости от браузера, поэтому вам необходимо вручную инициировать событие, если изображение complete , как это:

$(function() { 
    $("#mike").one('load', function() { 
    $(this).show("slide", { direction: "up" }, 2000); 
    }).each(function() { 
    if(this.complete) $(this).load(); 
    }); 
}); 

.one() обеспечивает событие только срабатывает один раз. .each() зацикливает каждый элемент, только один в этом случае, и если он уже complete (который был бы извлечен из кеша), он запускает событие, чтобы убедиться, что он выключен (если он уже запущен, .one() позаботился об этом не скольжение в два раза).

Answer 2

@ Возможно, вам удастся использовать комбинацию CSS и jQuery для выполнения этой задачи - это решение проблем кэширования с изображениями (см. Ответ Ника для объяснения). Вот грубый пример:

CSS:

#mike { 
    display: block; 
    margin: 0; padding: 0; /* Ignore this if you're using a reset.css */ 

    position: absolute; /* Change this to relative based on the containing elements */ 
    top: 2000px;   /* Assumes you have an image that's 100px tall as an example */ 
} 

JQuery:

jQuery(function(){ 
    $('#mike').animate({'top':'0'},255,'linear', function(){ 
     console.log('Done Animation); 
    }); 
}); 

Вы можете также замедлить анимацию за несколько секунд (или миллисекунды) после загрузки страницы:

jQuery(function(){ 
    // Delay the animation by 1 second after page load before animating. 
    $('#mike').delay(1000).animate({'top':'0'},255,'linear', function(){ 
     console.log('Done Animation); 
    }); 
});