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

LVL 5
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)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>
0
RobOwner (Aidellio)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") + ")");
        }
    });
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tahir QureshiSystem AnalystCommented:
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

0
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
This is great!
I have adapted it slightly however this simple solution has worked a treat!
Thank you.
Neil
0
RobOwner (Aidellio)Commented:
My pleasure.  Thanks for the points :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.