Avatar of Neil_Bradley
Neil_Bradley
Flag for New Zealand 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

CSSjQueryBootstrap

Avatar of undefined
Last Comment
Rob

8/22/2022 - Mon
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.

<!--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>
ASKER CERTIFIED SOLUTION
Rob

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Rob

My pleasure.  Thanks for the points :)