JQuery сдвинуть изображение вниз при загрузке страницы - PullRequest
Новая
       4

JQuery сдвинуть изображение вниз при загрузке страницы

1 голос
/ 20 апреля 2010

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

Изучив документы jquery и попробовав запросы Google, я до сих пор придумал это 

  $(document).ready(function() {

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

});

  });

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

Похоже, это не сработает, пока я не перезагружу страницу.

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

Ответы [ 2 ]

2 голосов
/ 20 апреля 2010

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

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

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

0 голосов
/ 17 октября 2012

@ Дин, вам, вероятно, лучше всего использовать комбинацию 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);
    });
} );
...