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

@Dean，你可能最好使用CSS和jQuery的组合来完成这项工作 - 这是为了解决图像的缓存问题（请参阅Nick的回复解释）。这是一个粗略的例子：

<强> 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);
    });
} );

jquery在页面加载时向下滑动图像

2 个答案: