Question

I’m building a responsive site, and on one particular page, I’m trying to have mobile devices (width 480 or less) not download particular images. I know I’m pretty close and I’ll tell you why after the code.

HTML:

<div class="index-section">
  <p><img class="scale-with-grid" alt="" /></p>
  <p><a href="#">A Letter from Person 1&nbsp;<span class="triangle">&#9654;</span></a></p>
</div>

<div class="index-section">
  <p><img class="scale-with-grid" alt="" /></p>
  <p><a href="">A Letter from Person 2&nbsp;<span class="triangle">&#9654;</span></a></p>
</div>

<div class="index-section">
  <p><img class="scale-with-grid" alt="" /></p>
  <p><a href="">A Letter from Person 3&nbsp;<span class="triangle">&#9654;</span></a></p>
</div>

<div class="index-section">
  <p><img class="scale-with-grid" alt="" /></p>
  <p><a href="">A Letter from Person 4&nbsp;<span class="triangle">&#9654;</span></a></p>
</div>

It’s basically 4 pretty much identical div’s. And here’s the jQuery:

$(document).ready(function() {

var imgPath = '_/img/'

var $winWidth = $(window).width();

var $indexSection = $('.index-section p img');

if ( $winWidth <= 480 ) {
    $indexSection.attr('src','');
    $indexSection.css('display','none');
    } else {
        var imgSrc = [ "keith-index.jpg", "derek-video.jpg", "bar-chart.jpg", "honor-roll.jpg" ];

        jQuery.each(imgSrc, function(value){
            $indexSection.attr('src',imgPath + value);
        });
   }
});

I put this in the head (after jQuery library) so that it adds the src as its rendering the HTML. This works on an iPhone (or Firefox at less than 480px wide) and doesn’t load the images, so that’s great.

The problem is that, above 480px, when I’m trying to loop through the images, it’s almost working because Firefox’s console tells me that it can’t load “http://myurl.com/_/img/0.jpg”, which tells me that it’s concatenating almost correctly, but that, for some reason, it’s printing the index of the array, rather than the value (I think).

What I need is, if the browser is wider than 480, to print the urls as the src attribute for each image ( “myurl.com/_/img/keith-index.jpg”, and the other three in their respective div) so that the images load on, say, a desktop browser.

Thanks for any help.

Answer 1

With jQuery.each, the first callback argument is the index in the collection, and the second argument is the value.

jQuery.each(imgSrc, function(index, value){
    $indexSection.attr('src',imgPath + value);
});

Edit: Whoops… I missed a more fundamental problem with what you’re trying to do.

$indexSection is a jQuery object containing all the images you’re working with. When you call $indexSection.attr, you’re setting the attribute for all four images at once. You do this for each of the imgSrc values, so all four images’ src attributes end up being set to the last imgSrc value.

Instead, you want to loop over the img tags, and access the correct value from imgSrc for each image.

$indexSection.each(function(index) {
    $(this).attr('src', imgPath + imgSrc[index]);
});