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

Question

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

图像比包含它们的 div 更宽，但并非所有图像都具有相同的宽度。我想通过在图像上设置负 margin-left 来移动图像，并以这种方式使图像在容器中居中。

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

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>