Setting Up An Array To Handle Size Conditions

I've got the following code. I am working on an array. I found a javascript array instructions..if this is wrong, I'd love help to find out if there is a jQuery version of this.

Solution 1:

Here's a solution that simplifies matters by using Array#filter to select the appropriate width; the appropriate size will sit in the first position of the sizes array:

$(document).ready(function() {
  window.onresize = resize;
  resize();
});
functionresize() {
  // use $.each to iterate over each element
  $('img.resizable').each(function(index, element) {   
    // get the image name directlyvar name = element.src.substring(element.src.lastIndexOf('/'));   

    // let's whittle down sizes to *only* those that fit our screen widthvar sizes = [600, 1000, 1920, 2880].filter(function(s){ 
      returnwindow.innerWidth < s || s == 2880;
    });
    // update the image with whatever size is in the first position
    $(element).attr('src', 'images/' + sizes[0] + name);
  });
}

We can move the resize function definition outside of your on ready handler, to make it globally accessible. We can dispense with use of split to just find whatever is after the last / (the image name). And we can avoid using loops and if statements with breaks, which tend to be difficult to read and maintain.

Solution 2:

This is a bit verbose and follows your array starting with the largest value which I used instead of hard coding that for the "largest" (last) conditional. Remove the console logs prior to deployment.

$(document).ready(function() {
  window.onresize = resize;
  var sizes = [2880, 1920, 1000, 600];

  functionresize() {
    console.log('si');
    var img = $('img.resizable');
    var width = $(window).innerWidth();
    img.each(function(index, element) {
      var name = element.src.split('/');
      name = name[name.length - 1];
      var setto = 0;
      for (var i = sizes.length; i >= 0; i--) {
        console.log(i,width,setto, sizes[i]);
        if (width <= sizes[i]) {
          setto = sizes[i];
          break;
        }
      }
      setto = width >= sizes[0] ? sizes[0] : setto;
      $(element).attr('src', 'images/' + setto + '/' + name);
    });
  }
  resize();
});

Solution 3:

You are referencing Sizes array using lowercase s at sizes[i], where sizes is not defined

Solution 4:

I hope this could solve your problem:

$(window).on('resize', function (e) {
  var img = $('img.resizable');
  var width = $(window).innerWidth();
  varSizes, sLength, i;
  img.each(function (index, element) {
    var name = element.getAttribute('src').split('/') // Split is a native javascript function, which 'splits' the string into an array with the componentsSizes = [2880, 1920, 1000, 600].sort((a, b) => {return a - b;});
    sLength = Sizes.length;
    for (i = 0; i < sLength; i++) {
      if (width <= Sizes[i]) {
        $(element).attr('src', 'images/' + Sizes[i] + '/' + name.pop())
        console.log('New src for image N. ' + index + ' is: ' + $(element).attr('src'));
        break;
      }
    }
  });
});

$(function () {
  // simulate a resize on dom ready: for testing
  $(window).trigger('resize');
});

<scriptsrc="https://code.jquery.com/jquery-1.12.4.min.js"></script><imgclass="resizable"src="images/100/nameofimage1.png"><imgclass="resizable"src="images/100/nameofimage2.png">

Solution 5:

You want something like this probably:

sort_array_small_to_large(Sizes)

for (i = 0; i < Sizes.length; i++)
{
   if (width <= Sizes[i])
   {
      size = Sizes[i]
      break
   }
}
$(element).attr('src', 'images/' + size + '/' + name[name.length - 1])