Replacing images with jQuery

Question

I have a website that works with desktop, tablet, and mobile. With desktop, the images on my website are big. With tablets, those same images get resized. And again with mobile, those same images get resized again. I am using the same images that are loaded on to desktop for mobile. This is poor performance for mobile devices. What I want is to replace those images, and display thumbnails for those images instead.

NOTE: The images are retrieved from my database using a PHP for-loop.

What I could do:

jQuery:

$(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize(){
    if ($(".sampleClass").css("float") == "none" ){
        // replaces images code here
    }
}

CSS:

.sampleClass {float:left;}
@media only screen and (max-width: 800px){
    .sampleClass {float:none;}
}

What I assume will happen with this code, is that the large images will be loaded and then the thumbnails will be loaded. Thus, creating a worse experience. How can I make it so that the images are automatically replaced with thumbnails on mobile, without loading the large desktop images?

@MoisheLipsker I have a PHP loop that will display images from the database. So to make it simple let's say it's like this: `{}` — user2896120, Jul 22 '16 at 05:50
Try the new html5 picture element. Or add the image dynamically, instead of replacing them — Jonas Wilms, Jul 22 '16 at 05:52
Instead of setting the `src` inline, you could do it with [css](http://stackoverflow.com/a/11484688/4297364). — Moishe Lipsker, Jul 22 '16 at 05:52

Ashish Mehta · Answer 1 · 2016-07-22T06:04:41.313

2

HTML

<div class="bgDiv" data-desktop-image="desktop.png" data-tablet-image="Tablet.png" data-mobile-image="Mobile.png"></div>

Script

function checkSize() {
  var windowWidth = $(window).width();
  $Element = $('.bgDiv');
  if (windowWidth > 1024) {
    currentImage = $Element.attr('data-desktop-image');
  } else if (windowWidth > 767 && windowWidth < 1025) {
    currentImage = $Element.attr('data-tablet-image');
  } else {
    currentImage = $Element.attr('data-mobile-image');
  }
  $Element.css('background-image', 'url(' + currentImage + ')');
}

edited Jul 22 '16 at 06:04

answered Jul 22 '16 at 05:58

Ashish Mehta

7,226
4
25
52

Will desktop images load as well as the mobile images if I'm on a mobile device? – user2896120 Jul 22 '16 at 06:01
@nope. It will load mobile images on desktop – Jonas Wilms Jul 22 '16 at 06:03
1

@user2896120 Plz chk my updated Answer. Now It will load as per screen resolution. – Ashish Mehta Jul 22 '16 at 06:05
@Jonasw Is there a way to not load mobile images on desktop? – user2896120 Jul 22 '16 at 06:07

Alexey · Accepted Answer · 2016-07-22T06:12:43.330

1

Something like this?

<img src="loader.gif" data-large-src="large-img-1.jpg" data-mobile-src="mobile-img-1.jpg"/>
<img src="loader.gif" data-large-src="large-img-2.jpg" data-mobile-src="mobile-img-2.jpg"/>

function checkSize(){
    if ($(".sampleClass").css("float") == "none" ){
        // init all the images with small versions of images
        $('img').each(function() {
          $(this).attr('src', $(this).attr('data-mobile-src'));  
        });
    }
    else {
      // init all the images with large versions of images
      $('img').each(function() {
        $(this).attr('src', $(this).attr('data-large-src'));
      });
    }
}

edited Jul 22 '16 at 06:12

answered Jul 22 '16 at 05:53

Alexey

980
5
12

This looks convincing, does the data-mobile-src work on most browsers? Also, if I went on mobile will the large-img-1.jpg and large-img-2.jpg load? – user2896120 Jul 22 '16 at 05:57
1

Problem: The script starts, when the site (including some of the large images) has loaded. – Jonas Wilms Jul 22 '16 at 05:58
To fix the issue that @Jonasw brought up, you could keep the `src` empty initially and set `large-img-1.jpg` and `large-img-2.jpg`to the value of a `data-large-src` attribute. Add an `else` that sets the image's `src` to `$(this).attr('data-large-src')`. – Moishe Lipsker Jul 22 '16 at 06:01
@MoisheLipsker What if I were to create three image elements. One for desktop, tablet and mobile. If I used media queries to hide the image elements using display none depending on the size of the browser, would that work? Would the desktop images still load if I were on mobile? – user2896120 Jul 22 '16 at 06:06
http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading – Moishe Lipsker Jul 22 '16 at 06:08
Per [Mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes), there is a css solution too using the css [`attr`](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) function. – Moishe Lipsker Jul 22 '16 at 06:54

Replacing images with jQuery

2 Answers2