4

ブラウザのサイズに応じて画像を入れ替えるというジレンマがあります。

ページに画像のコレクションがあり、ブラウザのサイズが変更されたときに切り替える必要があります。基本的に、すべての画像を特定の幅のサブフォルダーに分割しました。すなわち。「1280」、「1152」、「1024」などのフォルダーがあります。ブラウザーのサイズが変更され、正しいブレークポイントに到達すると、javascript を使用してフォルダー名を検索および置換します。

現状では、私が持っているコードは機能しますが、ページがリロードされたときだけです。ユーザーがマウスを押したままウィンドウのサイズを変更すると、パスは変更されません。つまり、最初のブレークポイントに到達した後も変更されないように見えます。幅 > 1280px から 1152px 未満まで。

問題は、私がコーディングに丸一日を費やしたのに、その日の終わりに向けて始めたばかりだったということです。そのため、私の心は完全に曖昧になり、これを論理的に考えることができません! ここで誰かが私を助けてくれれば、締め切りが迫っていて、これを終わらせる必要があるので、とても感謝しています。

わかりやすくするためにコードを切り詰めましたが、これまでのところ次のとおりです。

<img src="/images/1280/img1.jpg" alt="" class="swap" />
<img src="/images/1280/img2.jpg" alt="" class="swap" />
<img src="/images/1280/img3.jpg" alt="" class="swap" />
<img src="/images/1280/img4.jpg" alt="" class="swap" />
<img src="/images/1280/img5.jpg" alt="" class="swap" />

そしてJavaScript：

function checkResolution() {
    // Resolution width > 1280px
    if ($(window).innerWidth() > 1280) {
        replaceImagePaths("1280");
    }
    // Resolution 1152px - 1279px
    else if ($(window).innerWidth() >= 1152 && $(window).innerWidth() <= 1279) {
        replaceImagePaths("1152");
    }
    // Resolution width 1024px - 1151px
    else if ($(window).innerWidth() >= 1024 && $(window).innerWidth() <= 1151) {
        replaceImagePaths("1024");
    }
    // Resolution width 768px - 1023px
    else if ($(window).innerWidth() >= 768 && $(window).innerWidth() <= 1023) {
        replaceImagePaths("768");
    }
    // Resolution width < 768px
    else if ($(window).innerWidth() <= 767) {
        replaceImagePaths("mobile");
    }
}

$(window).resize(function() {
    checkResolution();
});

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

function replaceImagePaths(resolution) {
    // Switch images
    $('.swap').each(function() {
        var imagePath = $(this).attr('src');
        $(this).attr('src', imagePath.replace("mobile", resolution));
        $(this).attr('src', imagePath.replace("768", resolution));
        $(this).attr('src', imagePath.replace("1024", resolution));
        $(this).attr('src', imagePath.replace("1152", resolution));
        $(this).attr('src', imagePath.replace("1280", resolution));
    }
}​

奇妙に思えるのは、ブラウザーの幅が 1280 を超える状態から開始してサイズを小さくすると、次の測定でパスが切り替わることです。1280年から1152年までですが、それ以降はうまくいかないようです。ただし、サイズ変更後にページが更新されると、すべて機能します。

私のreplaceImagePaths()関数と関係があることは知っていますが、どこが間違っているのかわかりません。その機能の背後にある理論は、すべてのパスをブランケットで置き換えるだけでしたが、値を上書きしているように見える..よくわかりません。そこには間違いなく何かおかしなことが起こっている。

ご協力いただきありがとうございます！

（psブラウザのサイズに応じて画像を切り替えるための多くの代替方法があることを認識していますが、この特定の状況では、そうするためにjsを使用する必要があります）

4

2 に答える 2

4

replaceImagePaths関数でjQueryループを適切に閉じていない可能性がありますか？また、コードにその他のマイナーな改善を加えました。

function checkResolution() {
    // Resolution width > 1280px
    if ($(window).innerWidth() > 1280) {
        replaceImagePaths("1280");
    }
    // Resolution 1152px - 1279px
    else if ($(window).innerWidth() >= 1152 && $(window).innerWidth() <= 1279) {
        replaceImagePaths("1152");
    }
    // Resolution width 1024px - 1151px
    else if ($(window).innerWidth() >= 1024 && $(window).innerWidth() <= 1151) {
        replaceImagePaths("1024");
    }
    // Resolution width 768px - 1023px
    else if ($(window).innerWidth() >= 768 && $(window).innerWidth() <= 1023) {
        replaceImagePaths("768");
    }
    // Resolution width < 768px
    else if ($(window).innerWidth() <= 767) {
        replaceImagePaths("mobile");
    }
}


function replaceImagePaths(resolution) {
    // Switch images
    $('img.swap').each(function(){
        var imagePath = $(this).attr('src');

        $(this).attr('src', imagePath.replace(/mobile|768|1024|1152|1280/, resolution));//with the right regex you can do it all in one

    });//was missing the  ");"
}

$(window).resize(function() {
    checkResolution();
});

$(function(){
    checkResolution();
});
于 2012-09-13T22:02:51.293 に答える
0

私の提案は、イメージ要素を新しい src を持つ新しいイメージ要素に完全に置き換えることです。ブラウザは、イメージ要素が既にそのイメージをロードしていると考え、src 属性の変更を無視するからです。

于 2012-09-13T21:44:34.157 に答える