JavaScript ですべてを行うのを忘れて、ほとんどの作業を CSS に任せてください。javascriptで本体に決定クラスを設定するだけです。
Javascript:
$(window).bind("resize", function(){
var body = $('body');
var bodyWidth = body.width();
body.toggleClass('size-480', bodyWidth < 480);
});
HTML:
<img src="transparant.gif" class="img-spelguide" />
CSS:
img.img-spelguide {
width: 400px; /*adjust accordingly*/
height: 400px; /*adjust accordingly*/
background: url(bilder/spelguide.jpg) 50% 50% no-repeat;
}
.size-480 img.img-spelguide {
width: 200px; /*adjust accordingly*/
height: 200px; /*adjust accordingly*/
background: url(bilder/480/spelguide.jpg) 50% 50% no-repeat;
}
純粋な JavaScript を使用して多くの画像を置き換えることもできますが、CSS の方が適しています。
ノート。@media-queries を使用できる場合は、そうしてください。これが最良の選択肢ですが、レガシー ブラウザをサポートする必要がある場合、media-queries は明らかに無効です =(
適切な測定のために、javascript ソリューションも投入しましょう。
HTML:
<img src="bilder/spelguide.jpg" data-small="bilder/480/spelguide.jpg" />
ジャバスクリプト:
$(window).bind("resize", function(){
var body = $('body');
var useSmall = body.width() < 480;
$('img[data-small]').each(function(){
var img = $(this);
var big = img.data( 'big') || img.attr('src');
var small = img.data('small');
// make sure we have the original (big) src stored.
img.data( 'big', big );
img.attr( 'src', useSmall ? small : big );
});
});
まだ最適化の余地があります。