1

我有一个图像列表，每个图像都显示在一个 div 中。div 的宽度会有所不同，因为它们被指定为容器的百分比。这样做的目的是获得灵活的设计。

图像比它们包含的 div 宽，但所有图像的宽度都不相同。我想通过在图像上设置负边距来移动图像，并以这种方式将图像置于其容器中。

由于负边距取决于图像的宽度，因此我需要在设置边距之前检查宽度。

function marginsOfImages() {
    var images = document.getElementsByTagName('img');
    for (i = 0; i < images.length; i++) {
        var parent = images[i].parentNode;
        var parentWidth = window.getComputedStyle(parent, null).getPropertyValue("width");
        /*In order to remove the "px" from the style: */
        var indexOfPx = parentWidth.search("px");
        parentWidth = parseInt(parentWidth.substring(0, indexOfPx));
        var imageWidth = window.getComputedStyle(images[i], null).getPropertyValue("width");
        indexOfPx = imageWidth.search("px");
        imageWidth = parseInt(imageWidth.substring(0, indexOfPx));
        var value = parentWidth + 90; //Want to shift the image 90px to the left
        if (imageWidth > value) {
            images[i].style.marginLeft = (value * (-1)).toString() + "px";
        }
    }
}
window.onload = marginsOfImages;

问题是图像首先呈现时没有任何边距，然后在一秒钟左右后，当javascript完成时，它们将根据宽度获得边距；页面显然已经加载后，图像的外观将发生变化。

如何在显示任何图像之前设置正确的边距？我需要在确定它们的尺寸之前加载所有图像，对吗？

提前致谢！

4

2 回答 2

2

我支持@Prescott，因为添加一个显示图像的类可能是要走的路。然而，一种更通用的方法是向html元素添加一个“js-loaded”类，然后你就可以随时使用它。我也总是使用“js”或“no-js”类来设置不同的样式：

<script>
    var html = document.getElementsByTagName('html')[0];

    html.className = html.className.replace('no-js', 'js');

    window.onload = function () {
        html.className += ' js-loaded';
    };
</script>

然后你可以简单地：

<style>
    html.js #images img {visibility: hidden}
    html.js-loaded #images img {visibility: visible}
</style>
于 2012-07-16T15:33:06.317 回答
1

您可以将所有图像设置为visibility:hidden（或替代display:none）样式，然后在您的 javascript 中删除该 css 属性（或类），以便在应用边距后显示

于 2012-07-16T15:19:02.367 回答