文档准备好并加载图像后如何调用函数？

发布于 2024-12-04 02:22:44 字数 326 浏览 3 评论 0原文

我正在使用这样的东西：

$(document).ready(function() {
  $('#my-img').load(function() {
    // do something
  });
});

但有时它无法执行第二个回调（没有抛出任何错误，所以那里没有什么可做的），我想也许在文档准备好之前加载图像。

如果我不使用 $(document).ready() 部分，它就可以正常工作，所以我想我现在就保留这种方式。但有人告诉我，总是在文档准备好时进行回调是一个很好的做法，因为文档可能还没有准备好。是这样吗？

有什么想法吗？

原文

I was using something like this:

$(document).ready(function() {
  $('#my-img').load(function() {
    // do something
  });
});

But sometimes it fails to execute the second callback (without throwing any errors, so there's nothing to do there), and I'm thinking that maybe the image is being loaded before the document is ready.

If I don't use the $(document).ready() part, it works fine, so I think I'm gonna leave it that way for now. But someone told me that it was a good practice to always do this kind of thing as a callback on document ready, because the document might not be ready. Is that right?

Any thoughts?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乱世争霸 2024-12-11 02:22:44

摘自有关 load() 的文档

与图像一起使用时加载事件的注意事项
开发人员尝试使用 .load() 解决的常见挑战
快捷方式是当图像（或集合）时执行一个函数
图像）已完全加载。有几个已知的警告
这是应该注意的。这些是：
它不能一致且可靠地跨浏览器工作
如果图像 src 设置为与之前相同的 src，则它不会在 WebKit 中正确触发
它没有正确地冒泡 DOM 树
****可以停止对已经存在于浏览器缓存中的图像进行触发****

尤其是后者是一个常见问题。

您可以尝试 imagesLoaded 插件，但我使用以下方法运气更好：

var element = $('#my-img');
$("<img/>").load(function () { //create in memory image, and bind the load event
    //do something
    //var imageHeight = this.height;
}).attr("src", element.attr("src"));
//set the src of the in memory copy after binding the load event, to avoid WebKit issues

它很脏，但是如果您确实需要在图像加载后执行某些操作，这是我能够开始工作的唯一可靠方法。

Taken from the documentation on load()

Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load()
shortcut is to execute a function when an image (or collection of
images) have completely loaded. There are several known caveats with
this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
****Can cease to fire for images that already live in the browser's cache****

Especially the latter is a common problem.

You might try the imagesLoaded plugin, but I've had better luck with the following approach:

var element = $('#my-img');
$("<img/>").load(function () { //create in memory image, and bind the load event
    //do something
    //var imageHeight = this.height;
}).attr("src", element.attr("src"));
//set the src of the in memory copy after binding the load event, to avoid WebKit issues

It's dirty, but if you really need to perform some action after the image has loaded this has been the only reliable approach I've been able to get to work.

回复收藏 0 原文

吹梦到西洲 2024-12-11 02:22:44

老问题，但可能对谷歌用户有用：如果您需要在加载图像后执行代码，并且图像位于 DOM 中，则应该使用 $(window).load 而不是 $(document).ready。例如：

$(window).load(function() {
    console.log("My image is " + $('#my-img').width() + " pixels wide.");
    // You may not have known this before the image had loaded
});

如果使用 SVG 或其他嵌入文档进行任何 jiggerypokery 操作，这一点至关重要。

Old question but may be useful to googlers: If you need code to execute after images are loaded, and the images are in the DOM, you should use $(window).load instead of $(document).ready. As in:

$(window).load(function() {
    console.log("My image is " + $('#my-img').width() + " pixels wide.");
    // You may not have known this before the image had loaded
});

This is vital if doing any jiggerypokery with SVGs or other embedded documents.

回复收藏 0 原文

~没有更多了~