Will content in a div with display: none still load?

I'm building a responsive website for a photographer friend of mine and we are using a responsive gallery for each set of images.

I had an idea to have him create two sets of images for each page. First set at 960px wide for desktop & iPads. Second set of images for mobile, probably sized to 480px. I'll then use media queries to change the display setting of the div that contains the relevant sized gallery.

Basically we don't want to have mobile users loading images optimized at 960px wide so we'll display the second set. Is this going to work or will the browser still load what is contained in a div that is set to display: none?

View Replies:
MysteriousCleon replied on at Permalink Reply
I think, that - yes, it will load. Better is to include somehow from other document depanding on device.
mkly replied on at Permalink Reply
Ok, well you probably can use javascript and a tool to serve the image you want based on the window size. Something like
<!-- in the theme -->
<img class="responsive-image" data-file="<?= $this->getThemePath() ?>/images/someimage.png" data-mobile-width="200" data-mobile-height="150" data-width="500" data-height="400" />

defined('C5_EXECUTE') or die('Access Denied.');
// /tools/get_responsize_image.php
$ih = Loader::helper('image');
$file = DIR_BASE . $_REQUEST['file'];
$width = $_REQUEST['width'];
$height = $_REQUEST['height'];
$image = (array) $ih->getThumbnail($file, $width, $height);
echo json_encode($image);

// Then some javascript to 
// check the size and get
// the thumbnail
$(function() {
  var windowWidth = parseInt($(window).width());
  var width;
  var height;
  $('.responsive-image').each(function() {
    var self = $(this);
    if(windowWidth < 480) {
      width = $(this).data('mobile-width');
      height = $(this).data('mobile-height');
    } else {
      width = $(this).data('width');
      height = $(this).data('height');

This won't handle resizing but should get you most of the way.

Edit: typos and silliness