troubleshooting Question

Prevent a display:none image from downloading on page load

Avatar of Neil_Bradley
Neil_BradleyFlag for New Zealand asked on
5 Comments1 Solution2966 ViewsLast Modified:
<!--this section shows on desktop but is hidden on mobile--> 
<section class="bg-image visible-xs visible-sm" data-background-img="uploads/images/full/04.jpg">

<!--this section is hidden on desktop but shows on mobile--> 
 <section class="bg-image hidden-xs hidden-sm" data-background-img="uploads/images/full/m/04.jpg">
Using Chrome tools I see that both the desktop and mobile background images download on page load.
How can I prevent the background image whose containing element is hidden from downloading?

If it helps I use the following js to convert the data-background to my background image
    var pageSection = $('.bg-image');
    pageSection.each(function (indx) {
        if ($(this).attr("data-background-img")) {
            $(this).css("background-image", "url(" + $(this).data("background-img") + ")");
Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros