1

それぞれdivに表示される画像のリストがあります。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;

問題は、最初は画像が余白なしでレンダリングされ、1 秒ほど後に 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 に答える