Prevent a display:none image from downloading on page load

Neil_Bradley
Neil_Bradley used Ask the Experts™
on
Hi EE
<!--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">
</section>

<!--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">
</section>

Open in new window

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?
Cheers,
N

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") + ")");
        }
    });

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
I think you may have this around the wrong way as the first section has visible-xs and -sm so it will be visible on mobile and sm widths.  The second section is hidden on mobile and sm widths.

<!--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">
</section>

<!--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">
</section>
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
As for your javascript, you need it to detect if the element is visible or not

 var pageSection = $('.bg-image');
    pageSection.each(function (indx) {
       if ($(this).css('display') == 'none') {
            return;  // do nothing if the element is not visible
        }
       if ($(this).attr("data-background-img")) {
            $(this).css("background-image", "url(" + $(this).data("background-img") + ")");
        }
    });
Tahir QureshiSystem Analyst

Commented:
you try like this


include 'Mobile_Detect.php';
$detect = new Mobile_Detect();

// Check for any mobile device.
if ($detect->isMobile())
   // mobile content
else
   // other content for desktops

Open in new window




Complete Function


function isMobileDevice(){
    $aMobileUA = array(
        '/iphone/i' => 'iPhone', 
        '/ipod/i' => 'iPod', 
        '/ipad/i' => 'iPad', 
        '/android/i' => 'Android', 
        '/blackberry/i' => 'BlackBerry', 
        '/webos/i' => 'Mobile'
    );

    //Return true if Mobile User Agent is detected
    foreach($aMobileUA as $sMobileKey => $sMobileOS){
        if(preg_match($sMobileKey, $_SERVER['HTTP_USER_AGENT'])){
            return true;
        }
    }
    //Otherwise return false..  
    return false;
}

Open in new window

Neil_BradleyWeb UX/UI Developer

Author

Commented:
This is great!
I have adapted it slightly however this simple solution has worked a treat!
Thank you.
Neil
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
My pleasure.  Thanks for the points :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial