We help IT Professionals succeed at work.

Prevent a display:none image from downloading on page load

Neil_Bradley
Neil_Bradley asked
on
2,953 Views
Last Modified: 2017-03-22
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

RobOwner (Aidellio)
CERTIFIED EXPERT
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)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
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)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
My pleasure.  Thanks for the points :)

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions