asked on

Prevent a display:none image from downloading on page load

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

Rob

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.


<section class="bg-image visible-xs visible-sm" data-background-img="uploads/images/full/04.jpg">
</section>


<section class="bg-image hidden-xs hidden-sm" data-background-img="uploads/images/full/m/04.jpg">
</section>

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tahir Qureshi

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_Bradley

ASKER

This is great!
I have adapted it slightly however this simple solution has worked a treat!
Thank you.
Neil

Rob

My pleasure. Thanks for the points :)