1

私は問題を抱えており、問題の理由を見つけることができないようです。私は JavaScript と jQuery の両方に少し慣れていません。

ただし、以下を使用して、単に画像のサイズを画像に追加する代わりにページのサイズを変更すると、src が繰り返し追加されます。

$(window).resize(function () {

    if ($(window).width() < 600) {

        if (ImageSize != 'stand') {
            $.each(imgIds, function (index, value) {
                Image_src = $('#' + value).attr('src');
                Image = Image_src.replace(/(\.[\w\d_]+)$/i, '$1');
                $('#' + value).attr('src', Image);
                $('#' + value).attr("ImageSize", 'stand');
            });
            $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back.png)');
        }
    }
    else if ($(window).width() > 960 && $(window).width() < 1280) {
        if (ImageSize != 'large') {
            $.each(imgIds, function (index, value) {
                Image_src = $('#' + value).attr('src');
                ImageLarge = Image_src.replace(/(\.[\w\d_]+)$/i, '_large$1');
                $('#' + value).attr('src', ImageLarge);
                $('#' + value).attr("ImageSize", 'large');
            });
            $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back_Large.png)');
        }
    }
   else {
        $.each(imgIds, function (index, value) {
            Image_src = $('#' + value).attr('src');
            Image = Image_src.replace(/(\.[\w\d_]+)$/i, '$1');
            $('#' + value).attr('src', Image);
            $('#' + value).attr("ImageSize", 'stand');
        });
        $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back.png)');
    }
});
4

3 に答える 3

1

これは少し代替的なアプローチですが、代わりにbodyウィンドウのサイズが変更されたときにクラスを設定CSSし、適切なサイズの複数のクラスを設定することを検討しましたか？JavaScript少しすっきりしていて、とCSSがあまり緊密に結合されていないことも意味すると思います。また、サイズを使用して、ページ上の要素の他の側面を決定できることも意味します。

  1. ページのサイズ変更
  2. 幅が600未満
    • ボディクラスをに設定しますsmall
  3. 幅は960〜1280です
    • ボディクラスをに設定しますmedium
  4. 幅が1280より大きい
    • ボディクラスをに設定しますlarge

これは、あなたの中であなたができることを意味しますCSS：

body.small #PageContentRow
{
    background-image: url('/my-image_small.png');
}
body.medium #PageContentRow
{
    background-image: url('/my-image_medium.png');
}
body.large #PageContentRow
{
    background-image: url('/my-image_large.png');
}
于 2012-06-08T14:02:59.127 に答える
0

画像に追加し続けるからです。

以下では、ファイル拡張子を切り取り、それに _large を追加しています。

ImageLarge = Image_src.replace(/(\.[\w\d_]+)$/i, '_large$1');

正規表現は _large を考慮に入れる必要があります

var str1 = "Responsive_Course_2_2.png";
var str2 = "Responsive_Course_2_2_large.png";

var re = /(_large)?(\.[\w\d_]+)$/i;
console.log( str1.replace(re, '_large$2') );
console.log( str2.replace(re, '_large$2') );
于 2012-06-08T13:57:10.660 に答える
0

background-size css プロパティもあります。何をしようとしているのかはわかりませんが、適用できるようです。

#PageContentRow
{
  background-size: 100%; /* Scales background to #PageContentRow's width */
}
于 2012-06-08T14:23:13.433 に答える