Question

我使用以下代码在我的页面上定位图片：

var adjustImages = function(){
    var monsters = [$("#m3"), $("#m4")];

    monsters[0].css('right', monsters[0].width() * -0.4 + "px");
    monsters[0].css('top', $("#divider-green").height() + $("#divider-orange").height() + (monsters[3].height() / 6) + "px");
    monsters[1].css('left', monsters[1].width() * -0.385 + "px");
    monsters[1].css('top', $("#divider-green").height() + $("#divider-orange").height() + $("#divider-red").height() + "px");
}

我在页面加载时调用此函数，并在调整页面大小时调用此函数：

$(document).ready(function(){
    adjustImages();
});

window.onresize = function(event) {
    adjustImages();
};

图像应位于窗口边框上（如图所示，部分图像不在屏幕上，部分关闭）。这可以通过将右/左设置为负数（相对于图像大小）来完成。

有时当我刷新页面时图像被正确放置，但有时候它们不在边界上（但是相对于边框定位（好像没有应用左/右调整）。有谁知道原因是什么这可能是？

Answer 1

看起来你没有在根据它的宽度进行数学运算之前检查图像是否已加载。这可能是导致行为不一致的原因。

首先在DOM中创建图像，在加载之前（如果它没有直接设置），它的宽度和高度都是0.我会做什么在您的图片上添加load事件监听器，然后调用adjust。

如果其中一张图片的宽度大于0，您也想调用adjustImages()，因为这意味着在文档准备好之前它已经加载了。

$(document).ready(function(){
    $('#m3, #m4').one('load', function () {
        adjustImages();
    });

    if ($('#m3').width > 0 || $('#m4').width > 0) {
        adjustImages();
    }
});

现在，该代码段有一些错误，因为一旦加载它就会触发，而不是在两者都被加载时触发。你想要调整它，甚至可能将它们分开，这样你就可以为每个人单独做事，但它应该给你这个想法。

使用javascript设置图像位置，并不总是正确放置

1 个答案: