動的イメージコンテンツのメディアクエリの使用

Question

メディアクエリを使用して、画面幅に基づいて異なるイメージを動的に表示するいくつかの例を見てきました。 http://jsfiddle.net/Ruddy/byH2j/

上記の例では、画像のパス が難しいあなたは検索結果のようなもののためにこれを行うことができますどのようにCSS

@media screen and (min-width: 1080px) { 
.site-header .site-branding { 
    background-image: url("../images/logo_big.png") !important; 
    background: blue; 
    } 
} 
@media screen and (max-width: 1079px) { 
    .site-header .site-branding { 
    background-image: url("../images/logo_med.png") !important; 
    background: green; 
    } 
} 

でコーディングされています。ここでは

は、私が他の場所で見つかったjfiddle例ですページが読み込まれるまで必要なイメージがわからないページ？

Answer 1

これに最適な解決策が見つかりました。メディアクエリを使用する代わりに、jQueryの$（window）.resize（）関数を使用して、現在のウィンドウサイズに基づいてsrc属性を変更できます。ここ

Codepen：偉大なペンのためのダスティンページへ http://codepen.io/dustinpage/pen/ytwjb

$(window).load(function() { 
    //Wait for images to load before displaying them. 
    //This prevents image flashing. 
    resizeImage(); 
    $('.image-resize').show(); 
}); 

$(window).resize(function() { 
    //Whenever the window is resized check to see if new image needed. 
    //Using the code to call images in Seven7 this way is OPTIONAL. 
    //Performance will be better if you don't use ".resize" event. 
    resizeImage(); 
}); 

function resizeImage() { 

$('.image-resize').each(function() { 
    var element = $(this), 
     src = $(this).attr('src'), 
     regx = /wid=\d+(\.\d)*/g, 
     currentWidth, 
     newWidth, 
     newSrc; 

    if ($(window).width() > 1824) { 
    /* Large Displays ----------- */ 
    //Return large image if screen size is over 768px 
    currentWidth = src.match(regx); 
    newWidth = 'wid=2000'; 
    newSrc = src.replace(currentWidth, newWidth); 
    //Begin temporary code for testing output 
    textWidth = newWidth.replace('wid=', ''); 
    $(".dsply-screen-size").text($(window).width()); 
    $(".dsply-image-size").text(textWidth); 
    //End temporary code for testing output 
    } 
    else if ($(window).width() <= 1824 && $(window).width() > 1366) { 
    /* Desktops ----------- */ 
    //Return large image if screen size is over 768px 
    currentWidth = src.match(regx); 
    newWidth = 'wid=1824'; 
    newSrc = src.replace(currentWidth, newWidth); 
    //Begin temporary code for testing output 
    textWidth = newWidth.replace('wid=', ''); 
    $(".dsply-screen-size").text($(window).width()); 
    $(".dsply-image-size").text(textWidth); 
    //End temporary code for testing output 
    } 
    else if ($(window).width() <= 1366 && $(window).width() > 767) { 
    /* Desktops ----------- */ 
    //Return large image if screen size is over 768px 
    currentWidth = src.match(regx); 
    newWidth = 'wid=1024'; 
    newSrc = src.replace(currentWidth, newWidth); 
    //Begin temporary code for testing output 
    textWidth = newWidth.replace('wid=', ''); 
    $(".dsply-screen-size").text($(window).width()); 
    $(".dsply-image-size").text(textWidth); 
    //End temporary code for testing output 
    } 
    else if ($(window).width() <= 767 && $(window).width() > 480) { 
    /* Tablets (portrait) ----------- */ 
    //Return medium image if screen size is between 481-767px 
    currentWidth = src.match(regx); 
    newWidth = 'wid=767'; 
    newSrc = src.replace(currentWidth, newWidth); 
    //Begin temporary code for testing output 
    textWidth = newWidth.replace('wid=', ''); 
    $(".dsply-screen-size").text($(window).width()); 
    $(".dsply-image-size").text(textWidth); 
    //End temporary code for testing output 
    } 
    else if ($(window).width() <= 480) { 
    /* Smartphones ----------- */ 
    //Return small image if screen size is less than 480 
    //Note: Default image state is small so this "else if" is technically not needed. 
    currentWidth = src.match(regx); 
    newWidth = 'wid=480'; 
    newSrc = src.replace(currentWidth, newWidth); 
    //Begin temporary code for testing output 
    textWidth = newWidth.replace('wid=', ''); 
    $(".dsply-screen-size").text($(window).width()); 
    $(".dsply-image-size").text(textWidth); 
    //End temporary code for testing output 
    } 

    element.attr('src', newSrc); 
}); 

}; 

クレジット。