サイトのモバイル バージョン内で画像が Web サーバーからダウンロードされないようにする方法. そのような性質の以前のスレッドを見ると、以下のようなコードを使用して画像の親を非表示にすることが役立つことがわかりました。
.parent {display:block;}
.background {background-image:url(myimage.png);}
@media only screen and (max-width:480px) {
.parent {display:none;}
}
問題は、スキーマのタグ付けなどを使用するのが好きなので、関連する SEO の問題に背景画像 CSS を使用したくないということです。ダウンロードを停止するのではなく、画像を非表示にするだけです。
注: これは著作権保護の問題 (右クリックの防止など) のためではなく、モバイルにダウンロードされたコンテンツの速度と最終的なサイズのためです。
このソリューションでは、CSS を使用して背景画像が読み込まれないようにし、jQuery を使用して画像が読み込まれないようにします。画像の読み込みを妨げる CSS ソリューションに精通していません。
JS フィドル: http://jsfiddle.net/CoryDanielson/rLKuE/6/
画像の高さと幅 (または比率) が事前にわかっている場合は、一連background-imageの固定サイズの DIV を設定できます。これは、アイコンやレイアウト タイプの画像に適用される場合があります。その例として、以下の HTML/CSS を見てください。
/* hidden by default */
aside {
display: none;
}
/* Pictures load for 'big screen' users.. pcs/tablets? */
@media screen and (min-width: 750px) {
aside {
display: block;
}
.catpicDiv {
height: 100px;
width: 100px;
display: inline-block;
border: 1px solid red;
background-image: url('http://img2.timeinc.net/health/images/slides/poodle-1-400x400.jpg');
background-size: cover;
}
}
とHTML
<aside>
<div class="catpicDiv"></div>
<div class="catpicDiv"></div>
<div class="catpicDiv"></div>
</aside>
画像の読み込みを防ぐための純粋な CSS ソリューションについては知りません。だから私はこのようにそれを解決します：
IMG タグを次のように定義します。
<img src="" data-src="url-to-image.jpg" />
次に、ドキュメントの頭のどこかに同様の JavaScript が必要です
1) 全画像読み込み機能
function loadAllTheImages() {
$("img").each(function(){
$(this).attr('src', $(this).attr('data-src'));
});
}
2) ユーザーがモバイルと PC のどちらを使用しているか (低速接続と高速接続) を判断し、画像を読み込むコード。このコードは防弾ではありません。これよりもはるかに正確で合理的なテストがあります。
$(window).load(function(){
if ( $(window).width() > 750 ) {
loadAllTheImages(); // !
} else {
$("body").append("<a id='mobileCheck' href='javascript: void(0);'>I GOTS 4G, LEMME HAVE EM!</a>");
}
});
3)とにかく画像をロードするボタンをアクティブにするためのコードはありますか? なぜでしょうか... ?
$(document).ready(function(){
$('body').prepend("<h1>" + $(window).width().toString() + "</h1>");
$('body').on('click', '#mobileCheck', function(){
loadAllTheImages(); // !
$("#mobileCheck").remove();
});
});
here と同様の解決策と、コメントで仮説を立てたもの：
CSS には、画像を非表示にしたり、表示を none に設定したりしても、画像が読み込まれないようにするネイティブ ソリューションはありません。
その結果を得るには、JS を使用する必要があります。JS に精通している場合は、まったく問題にならないはずです。必要なことを行うためにすぐに使用できるプラグインがいくつかあります。それほど難しくないので、独自の JS を作成することもできます。
画面サイズに基づいて画像をロードする私のコードは次のとおりです。
JQ のようなライブラリがなくても動作しますが、それらのいずれかを使用すると、自動的にそれに切り替わります (特定のニーズに合わせて微調整します)。
JS
// use jQuery or pure JS
if (typeof jQuery !== 'undefined') {
// jQuery way
// alert("jquery");
$(function() {
$(window).on('load resize', function() {
var products = $("[data-product-image]");
products.each(function(key, value) {
var bg = null;
if (window.outerWidth < 500) return;
if (window.outerWidth < 1000) bg = $(value).data("product-image-s");
if (window.outerWidth >= 1000) bg = $(value).data("product-image");
console.log($(window).outerWidth);
$(value).css({
'background-image': 'url(' + bg + ')',
'background-position': 'center',
'background-size': 'cover',
});
});
});
});
} else {
// Pure JS way
// alert("JS");
(function() {
window.addEventListener('load', wlImageLoader);
window.addEventListener('resize', wlImageLoader);
function wlImageLoader() {
console.log('event! Trig trig');
var all = document.getElementsByTagName("div");
var products = [];
for (i = 0; i < all.length; i++) {
if (all[i].hasAttribute('data-product-image')) {
products.push(all[i]);
}
}
Array.prototype.forEach.call(products, function(value) {
var bg = null;
var curent = window.getComputedStyle(value).getPropertyValue('background-image');
console.log(curent);
if (window.outerWidth < 500 || curent != 'none') return;
if (window.outerWidth < 1000 && curent == 'none') bg = value.getAttribute('data-product-image-s');
if (window.outerWidth >= 1000 && curent == 'none') bg = value.getAttribute('data-product-image');
// if (window.outerWidth >= 2000 && curent == null) bg = value.getAttribute('data-product-image-l');
if(bg == null || curent != 'none') return;
value.style.backgroundImage = "url(" + bg + ")";
value.style.backgroundPosition = "center";
value.style.backgroundSize = "cover";
curent = window.getComputedStyle(value).getPropertyValue('background-image');
console.log(curent);
});
}
})();
}
HTML
<div data-product-image="img/something_normal.jpg" data-product-image-s="img/something_small.jpg" id="p3" class="product">
ただし、時間の読み込みが苦手な場合は、jQuery ライブラリのほとんどを使用しないことが多いため、コードを JS でネイティブに記述することを好むでしょう。高速インターネット接続の場合、これは問題ではありませんが、国側のモバイル デバイスをターゲットにすると、違いが生じる可能性があります.
おそらく@importコマンドと@mediaコマンドを組み合わせて、@ mediaタグが基準を満たしている場合（たとえば、特定の解像度以上）に画像を含むスタイルシートのみを@importすることをお勧めします。
したがって、デフォルトでは、BGイメージを適用するスタイルシートをインポートしません。サイトが「非モバイル」であると判断した場合にのみ、インポートすることになります。
W3cサイトには、ルールを組み合わせるための適切な例がいくつかあります。