change image source based on mobile devices

Question

I am trying to change the image source for devices with small screen size. I want to target only mobile devices (not desktop browsers) smaller than 1024px width.

I don't want to use media queries since they are going to load both hi and low resolution versions of the image if I change the browser size on desktop. I can target devices separately but it's gonna be huge mess on my css file.

Any proper solution to load smaller images for mobile devices only? (especially smaller than tablets). Also with userAgent it's not easy to target devices like android tablets and android smartphones.

I am using this code but it also causes duplicate file load after I refresh the page.

$(function() {
  if($(window).width() <= 1024) {
    $(".slides-container li img").each(function() {
      $('.slides-container li img').attr('src',function(i,e){
        return e.replace("img/galeri/large","img/galeri/medium");
      });
    });
   }
});

Instead of modifying the src attribute, you can try inserting the img element dynamically using $().html() — Pawan
– Pawan, Commented Dec 5, 2014 at 7:00

www139 · Accepted Answer · 2014-12-05 13:57:15Z

2

Try doing an event handler for window resize:

<body onload="window.addEventListener('resize', setPanels); setPanels();">

function setPanels()
{
  var windowWidth = window.innerWidth;
  if(windowWidth < 500)
  {
    document.getElementById('your image').src = 'new image source';
  }
  else
  {
    document.getElementById('your image').src = 'new image source desktop';
  }
}

answered Dec 5, 2014 at 13:57

www139

5,2373 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A dev · Accepted Answer · 2014-12-05 05:01:37Z

0

$(function() {
  if($(window).width() <= 1024) {
    $(".slides-container li img").each(function() {
      if($(this).attr('src').indexOf("large") > -1){
          $(this).attr('src',function(i,e){
               return e.replace("img/galeri/large","img/galeri/medium");
          });
      }
    });
   }
});

answered Dec 5, 2014 at 5:01

A dev

9583 gold badges12 silver badges29 bronze badges

Comments

Aaron Hammond · Accepted Answer · 2014-12-05 06:39:59Z

Your issue (as I understand it) is that when the page initially loads, all the images have src="img/galeri/large/...", and you're trying to conditionally change that to be instead src="image/galeri/medium/..." if appropriate for the viewport's width.

Unfortunately, as soon as the img is loaded in the dom, the browser will begin to load the src file, all before your jQuery ever runs.

Given that you evidently have some control over the backend, the lightest weight (albeit quite hacky) solution may be to nuke the src attribute on all imgs on the page, replaced with some other attribute isrc that contains the asset name (the bit after the img/galeri/large or img/galeri/medium), and then step through your image tags on page load like this

$(function() {
    var assetLoc = "img/galeri/large";
    if($(window).width() <= 1024) {
        assetLoc = "img/galeri/medium";
    }

    $(".slides-container li img").each(function() {
        var assetSrc = assetLoc + $(this).attr('isrc');
        $(this).attr('src', assetSrc);
    });
});

Again, hacky, but it will allow for the asynchronous loading you're looking for with a minimal amount of work.

Collectives™ on Stack Overflow

change image source based on mobile devices

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related