デバイスに応じて読み込む画像を変える「Multisource Image」
当ページのリンクには広告が含まれています。
スポンサーリンク
デバイスに応じて読み込む画像を変更するプラグイン「Multisource Image」を紹介します。
jQueryプラグイン「Multisource Image」
このプラグインを使えば、ブラウザー（デバイス）の幅に応じて、読み込む画像を変えることができます。
画像を切り替える幅をオプションで指定することもできます。スマホ・タブレット・デスクトップの解像度に応じて、お好みの画像を表示させることができますね。
スポンサーリンク
それではデモページをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Multisource Image のデモでーす。">
<title>Multisource Image - jQuery Plugin Demo</title>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/multisource-image/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>Multisource Image</h1>
<p>ブラウザーの幅を変えて、ページを更新してみてください。</p>
<img src="images/image-tablet.png"
data-src-mobile="images/300.png"
data-src-tablet="images/512.png"
data-src-desktop="images/800.png"
data-src-big="images/1024.png"
alt="Image image" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.mimage.js"></script>
<script>
$(function() {
$.mImg({
selector: null,
onresize: false,
loader: true,
loaderImg: undefined,
sizes: {
mobile: 400,
tablet: 640,
desktop: 1280
}
});
});
</script>
</body>
</html>
スポンサーリンク