web-dev-qa-db-ja.com

非表示の画像を読み込まない

自分のウェブサイトに隠し画像がたくさんあります。それらのコンテナーDIVには、style = "display：none"があります。ユーザーのアクションによっては、一部の画像がJavaScriptを介して表示される場合があります。問題は、ページを開いたときにすべての画像が読み込まれることです。最終的に表示されるようになる画像のみをロードすることで、サーバーへの負担を軽減したいと思います。これを行う純粋なCSSの方法があるかどうか私は思っていました。ここに私が現在それをしている2つのハック/複雑な方法があります。ご覧のとおり、これはクリーンなコードではありません。

<div id="hiddenDiv">
   <img src="spacer.gif" />
</div>

.reveal .img {
 background-image: url(flower.png);
}

$('hiddenDiv').addClassName('reveal');

これが方法2です。

<img id="flower" fakeSrc="flower.png" />

function revealImage(id) {
 $('id').writeAttribute(
  'src',
  $('id').readAttribute('fakeSrc')
 );
}

revealImage('flower');
javascriptcssimagehttp
25
JoJo

ここにjQueryソリューションがあります：

$(function () {
   $("img").not(":visible").each(function () {
       $(this).data("src", this.src);
       this.src = "";
   });

   var reveal = function (selector) {
       var img = $(selector);
       img[0].src = img.data("src");
   }
});

これは、マークアップでfakeSrc属性を使用しないことを除いて、ソリューションと似ています。 src属性をクリアしてロードを停止し、他の場所に保存します。画像を表示する準備ができたら、ソリューションで行うようにreveal関数を使用します。 jQueryを使用しない場合はお詫びしますが、プロセスは、使用するフレームワーク（存在する場合）に転送できる必要があります。

注：このコードは、ウィンドウがloadイベントを発生させる前に、ただしDOMがロードされた後に実行する必要があります。

27
Cristian Sanchez

ブラウザーはsrc属性が設定されている画像をロードするため、マークアップでdata-srcを使用し、JavaScriptを使用してsrc属性を設定することで、ロードしたい。

<img class="hidden" data-src="url/to/image.jpg" />

私は問題を処理するこの小さなプラグインを作成しました：

(function($){
    // Bind the function to global jQuery object.
    $.fn.reveal = function(){
        // Arguments is a variable which is available within all functions
        // and returns an object which holds the arguments passed.
        // It is not really an array, so by calling Array.prototype
        // he is actually casting it into an array.
        var args = Array.prototype.slice.call(arguments);

        // For each elements that matches the selector:
        return this.each(function(){
            // this is the dom element, so encapsulate the element with jQuery.
            var img = $(this),
                src = img.data("src");

            // If there is a data-src attribute, set the attribute
            // src to make load the image and bind an onload event.
            src && img.attr("src", src).load(function(){
                // Call the first argument passed (like fadeIn, slideIn, default is 'show').
                // This piece is like doing img.fadeIn(1000) but in a more dynamic way.
                img[args[0]||"show"].apply(img, args.splice(1));
            });
        });
    }
}(jQuery));

ロード/表示したい画像で.revealを実行します：

$("img.hidden").reveal("fadeIn", 1000);

jsFiddleのテストケース を参照してください。

34
mekwall

これは、画像をコードに配置する方法に部分的に依存します。 <div>の背景として画像を表示できますか、または<img>タグを使用する必要がありますか？ <img>タグが必要な場合は、使用しているブラウザによっては煩わしいことがあります。一部のブラウザは、画像が非表示オブジェクトの内部または幅/高さが0のオブジェクト内にあることを認識するのに十分スマートであり、いずれにしても基本的に非表示であるため、ロードしません。このため、多くの人は、画像をプリロードしたが表示されないようにする場合、画像を1x1ピクセルの<span>に配置することを推奨します。

<img>タグが必要ない場合、問題の要素が表示されるまで、ほとんどのブラウザーはCSSによって参照される画像をロードしません。

AJAX=を使用して画像をダウンロードするのではなく、ブラウザが画像をプリロードしないことを100％確認する方法はありません。ブラウザが事前に-loadは、平均ロード時間を「スピードアップ」するために後で使用される可能性があるものを想定しています。

2
stevendesu

CSSを使用して画像を未使用のクラスに配置し、そのクラスをJavaScriptを使用して要素に追加するのが最善の方法です。イメージタグをまったく使用しない場合、この解決策は少し明白になります。

ただし、遠近法では、ほとんどの人は反対の問題を抱えており、画像をプリロードして、表示するように指示されたときに即座に表示したい場合があります。

0
Alex Wayne

画像をCSSでdivのbackground-imageにした場合、そのdivが「display：none」に設定されていると、画像は読み込まれません。

純粋なCSSソリューションに対して次のことを行うことができます。これにより、imgボックスがレスポンシブデザイン設定のimgボックスのように実際に動作するようになります（これが透明なpngの目的です）。これは、デザインでレスポンシブ動的に使用する場合に特に便利です。画像のサイズ変更。

<img style="display: none; height: auto; width:100%; background-image: 
url('img/1078x501_1.jpg'); background-size: cover;" class="center-block 
visible-lg-block" src="img/400x186_trans.png" alt="pic 1">

画像は、visible-lg-blockに関連付けられたメディアクエリがトリガーされ、display：noneがdisplay：blockに変更された場合にのみ読み込まれます。透明なpngを使用して、ブラウザが流体設計（高さ：自動、幅：100％）の<img>ブロック（および背景画像）に適切な高さ：幅の比率を設定できるようにします。

1078/501 = ~2.15  (large screen)
400/186  = ~2.15  (small screen)

したがって、3つの異なるビューポートに対して、次のような結果になります。

<img style="display: none; height: auto; width:100%; background-image: url('img/1078x501_1.jpg'); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/517x240_1.jpg'); background-size: cover;" class="center-block visible-md-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/400x186_1.jpg'); background-size: cover;" class="center-block visible-sm-block" src="img/400x186_trans.png" alt="pic 1">

また、初期ロード中にはデフォルトのメディアビューポートサイズの画像のみが読み込まれ、その後、ビューポートに応じて、画像が動的に読み込まれます。

そしてjavascriptなし！

0
ats

スクリプトを使用しても問題ない場合は、背景画像メソッドと画像srcメソッドがあります。簡単に言うと、すべての非表示の画像を非常に小さな画像（サーバーの負担を減らす）またはまったく存在しない画像に設定します（気にしないでください。訪問者は画像の欠落した[X]を表示できません。divは非表示です）。スクリプトで変更...

<img src="I_do_not_exist.jpg" id="my_image" />
<input type="button" onclick="document.getElementById('my_image').src='I_exist.jpg';" Value="change image" />

<br /><br /><br />

<div id="mydiv" style="width:40px; height:40px; border:2px solid blue"></div>

<input type="button" onclick="document.getElementById('my_div').style.width='455px';document.getElementById('my_div').style.height='75px';document.getElementById('my_div').style.backgroundImage='url(I_exist.jpg)';" Value="change background image" />

上記の例では幅を残して、ロードを要求するまでdivイメージには何もないことを示しています。

0
Terry