Question

我有一个以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完成时的宽度，它们将获得边距;在页面显然已经加载后，图像的外观将会改变。

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

提前致谢！

Answer 1

我和@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>

Answer 2

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

在渲染之前使用javascript设置样式

2 个答案: