jquery - 铬零中的jQuery高度

Question

我将 capty 附加到图像上，我愿意

$(document).ready(function(){
$('.shop_banner img').capty({height:150});
});

在 chrome 中，当我调试 capty 代码时alert($this.height())为零，所以包装器隐藏图像。我知道某些浏览器希望图像完全加载，但如果我使用ready并不意味着它在页面完全加载后执行？我能做些什么？

Answer 1

不，加载和准备不是一回事。

你可以做

$(window).load(function(){
    $('.shop_banner img').capty({height:150});
});

ready会在 DOM 准备好后立即调用您的函数，这并不意味着图像已加载。

从文档中：

虽然 JavaScript 在页面呈现时提供了用于执行代码的加载事件，但在完全接收到所有资产（例如图像）之前，不会触发此事件。在大多数情况下，只要完全构建了 DOM 层次结构，就可以运行脚本。传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他 jQuery 代码的最佳位置。当使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素很重要。

如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放置在加载事件的处理程序中。

Answer 2

在对图像进行任何特殊处理之前，我通常会在图像上使用加载功能。

$(function() {
    $('.shop_banner img').load(function() {
        $(this).capty({height:150});
    });
});