バックグラウンドイメージを読み込まないようにする

Question

私のウェブサイトには、たくさんのイメージがあります。そして、ユーザーがもっと見たいと思ったら、 "もっと見る"ボタンをクリックするだけです。隠された画像は、display:noneプロパティを持つdivに置かれます。残念ながら、まだロードされています（実際には表示されませんが、ロードするだけです）。ユーザーがもっと表示するまで、それらをロードしないためにはどうすればよいですか？

この部分は、画像が表示されます。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#show-more-images").click(function(){ 
      $("#more-photos").toggle(); 
     }) 
    }); 
</script> 

すべてのヘルプ感謝：

<div id="bx-pager"> 
    <?php 
     for ($i=0; $i < count($this->images); $i++) { 
      echo "<a data-slide-index='" .$i. "' style='background: url(" .$this->baseUrl. "/img/upload/" .$this->images[$i]->image. ") center center no-repeat; background-size: cover;'></a>"; 
      if ($i == 10) { 
       break; 
      } 
     } 
    ?> 

    <p id="show-more-images">Show more images</p> 

    <div id="more-photos" style="display: none;"> 

    <?php 
     for ($i=11; $i < count($this->images); $i++) { 
      echo "<a data-slide-index='" .$i. "' style='background: url(" .$this->baseUrl. "/img/upload/" .$this->images[$i]->image. ") center center no-repeat; background-size: cover;'></a>"; 
     } 
    ?> 
    </div> 
</div> 

これは、ユーザーがしたい場合は、追加の画像を表示するための責任jQueryの一部です。

Answer 1

は多分このよう：

background: none !important;でCSSクラスを使用し、後でそれを削除。 私はそれをテストしましたが、イメージが以前にロードされていないかどうかは確かではありません。

$('.image').click(function() { 
 
    $(this).removeClass('hidden'); 
 
});

.image { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-size: cover; 
 
    border: 1px solid #000; 
 
} 
 
.image.hidden { 
 
    background: none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="image hidden" style="background-image:url('http://wallpapercave.com/wp/CpRGNUC.jpg');"> 
 
    click me 
 
</div>

その他のソリューション：

あなたはjavascriptを経由background-imageルール後で追加することができます。画像のURLをdata-image-url="http://www.your-site/your-image.jpg"にして、後でbackground-imageとして使用してください。

$('.image').click(function() { 
 
    $(this).css('background-image', 'url(' + $(this).attr('data-image-url') + ')'); 
 
});

.image { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-size: cover; 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="image" data-image-url="http://wallpapercave.com/wp/CpRGNUC.jpg"> 
 
    click me 
 
</div>

Answer 2

あなたが動的ので、（そこにページ上の少ないテキストだが、実際の速度ゲインが最小限になりますので）あなたがより速くロードを確認して、それらの画像要素を生成することができます。

このような配列では、あなたのイメージへのリンクを入れて：

var links = [ 
    '/image1.png', 
    '/image2.png' 
]; 

その後の要素を生成します。

$("#show-more-images").click(function(){ 
    var link, $el; 
    for (var i=0; i<links.length; i++) { 
     link = links[i]; 
     $el = $('<a>').attr('style', 'background: url(' + link + ')'); 
     $el.appendTo($('#more-photos')) 
    } 
}); 

Answer 3

「ショーはより多くの」AJAXリクエストを使用して、それをクリックした後、あなたは画像/秒を読み込むことができます。表示：あなたが言ったように、表示されていてもロードされているので、パフォーマンスを向上させたい場合は、何も動作しません。