Forums

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

Permalink
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?
C5ThemeTeam
 
MysteriousCleon replied on at Permalink Reply
MysteriousCleon
I think, that - yes, it will load. Better is to include somehow from other document depanding on device.
mkly replied on at Permalink Reply
mkly
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" />

<?php
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');
Viewing 15 lines of 28 lines. View entire code block.

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

Edit: typos and silliness