CODEWITHSUNDEEP
jqueryhtmlcssperformance
Peter
Peter

Reputation: 215

Prevent from loading background images

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 display:none 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?

This part displays images:

<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>

This is the jQuery part responsible for displaying additional images if users wants to:

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

Any help appreciated.

Upvotes: 1

Views: 1546

Answers (3)

Andy Tschiersch
Andy Tschiersch

Reputation: 3816

Maybe this way:

Use a css class with background: none !important; and remove it later. I have testet it, but i am not realy sure whether the image isn't loading before.

$('.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>

Other solution:

You can add the background-image rule later via javascript. Just hold the image url in i.e. data-image-url="http://www.your-site/your-image.jpg" and use it later as 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>

Upvotes: 1

Tolga Kısaoğulları
Tolga Kısaoğulları

Reputation: 638

You can load image/s after "show more" click it using ajax request. Display: none does not work if you want to more performance because as you said, it loads even it is display:none.

Upvotes: 0

KWeiss
KWeiss

Reputation: 3144

You could dynamically generate those image elements, thus making sure you load even faster (because there's less text on the page, but the actual speed gain will be minimal).

Put your image links in an array like this:

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

Then generate the elements:

$("#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'))
    }
});

Upvotes: 0

Related Questions