title: Prevent from loading background images
body: <p>on my website there are a lot of images, in order to make it faster I would like to display only few of them. Then If the user wants to see more, he just has to click "show more" button. The hidden images are placed in div which has <code>display:none</code> property. Unfortunately, they still load (in fact they are not visible, however, they just load). What should I do to not load them unless the users clicks show more?</p>
  
  <p>This part displays images:</p>
  
  <pre><code>&lt;div id="bx-pager"&gt;
      &lt;?php
          for ($i=0; $i &lt; count($this-&gt;images); $i++) { 
              echo "&lt;a data-slide-index='" .$i. "' style='background: url(" .$this-&gt;baseUrl. "/img/upload/" .$this-&gt;images[$i]-&gt;image. ") center center no-repeat; background-size: cover;'&gt;&lt;/a&gt;";
              if ($i == 10) {
                break;
              }
          }
      ?&gt;
  
      &lt;p id="show-more-images"&gt;Show more images&lt;/p&gt;
  
      &lt;div id="more-photos" style="display: none;"&gt;
  
      &lt;?php
          for ($i=11; $i &lt; count($this-&gt;images); $i++) { 
              echo "&lt;a data-slide-index='" .$i. "' style='background: url(" .$this-&gt;baseUrl. "/img/upload/" .$this-&gt;images[$i]-&gt;image. ") center center no-repeat; background-size: cover;'&gt;&lt;/a&gt;";
          }
      ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the jQuery part responsible for displaying additional images if users wants to:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $("#show-more-images").click(function(){
              $("#more-photos").toggle();
          })
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help appreciated.</p>