jQuery向下滑动页面加载图像 [英] jquery slide down image on page load

问题描述

我对jquery(或Java脚本)没有经验，但是试图在页面加载时插入图像(img id=mike ...).

I'm not experienced with jquery (or java script really), but trying to make an image (img id=mike ...) slide in when a page loads.

在浏览了jQuery文档并尝试了Google查询之后，到目前为止，我已经提出了

After looking through the jquery docs and trying Google queries, I have so far come up with this

  $(document).ready(function() {

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

});

  });

并应用了CSS display:hidden，因此它一直保持隐藏状态，直到我希望它在页面加载时滑入为止.

And applied the CSS display:hidden so it remains hidden until I want it to slide in on page load.

这似乎不起作用，除非我重新加载页面.

This doesn't seem to work unless I reload the page though.

希望有人可以帮助我解决这个问题:)

Hoping someone could help me out with this please :)

推荐答案

.load()不会触发，因此取决于浏览器，因此如果图像是complete，就像这样:

.load() isn't triggered if the image is retrieves from cache, depending on the browser, so you need to manually fire the event if the image is complete, like this:

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

.one() 确保事件仅触发一次. .each() 循环遍历每个元素，在这种情况下，只有一个元素，如果已经(如果从缓存中获取，则会触发该事件)以确保事件已关闭(如果已触发，则.one()会照顾它不会滑入两次).

The .one() ensures the event only fires once. The .each() loops though each element, only one in this case, and if it's already complete (which it would be if fetched from cache) fires the event to make sure it goes off (if it already fired, the .one() took care of it not sliding in twice).

这篇关于jQuery向下滑动页面加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！