Question

I've got the following code for my images using srcset. I'd prefer to get away from srcset altogether. I want this to process all images with a particular class.

<img src="images/Connect-Groups-600.jpg"
srcset="
images/Connect-Groups-600.jpg 600w,
images/Connect-Groups-1000.jpg 1000w, 
images/Connect-Groups-1920.jpg 1920w,
images/Connect-Groups-2880.jpg 2880w
" alt=""/>

Does anyone know of a solution using jquery that will take the tag and change the location based on screen size. I need this to work on mobile devices too.

ex:

If screen is bigger than 1920w, it uses images/2880/Connect-Groups.jpg
If screen is bigger than 1000w and 1920w or less, it will pull images/1920/Connect-Groups.jpg
If screen is between 601 and 1000 it will pull images/1000/Connect-Groups.jpg
if screen is 600w or less, it pulls images/600/Connect-Groups.jpg

If the size detection fails, I want it to always pull the image in the tag.

I need this to work no matter what the image is...I have no clue what to even search for to find a solution to do this.

EDIT

At the end of this, I want to be able to put in on the page... the code will then pull the URL from the img tag, and append the correct size folder.

It will end up looking like on the end user side.

Answer 1

Pretty much identical to Muhammad's answer but in jQuery. If you wanted to do by class just remove the '#' and add a '.'

window.onresize = resize;

function resize() {
  console.log($(window).innerWidth);
  if ($(window).innerWidth > 1920) {
    $("#imageid").src = "images/2880/Connect-Groups.jpg";
  } else if ($(window).innerWidth > 1000 && $(window).innerWidth <= 1920) {
    $("#imageid").src = "images/1920/Connect-Groups.jpg";
  } else if ($(window).innerWidth > 601 && $(window).innerWidth <= 1000) {
    $("#imageid").src = "images/1000/Connect-Groups.jpg";
  } else if ($(window).innerWidth <= 600) {
    $("#imageid").src = "images/600/Connect-Groups.jpg";
  }
}

<img id="imageid">

Answer 2

请注意，此方法不可持续，我不建议将其用于其他任何方面，但它会帮助您解决此特定问题：

鉴于您的文件夹结构仍然如下：

图像/ <size> / <filename.ext>

我们可以根据这些信息重新创建一个来源：

function resize() {

  // First, we'll grab all the images on the page that can be changed:
  var img = document.querySelectorAll('img.resizable');

    for(var i = 0; i < img.length; i++) {
        // Grab the image extension
        var src = img[i].src.split('/')

        if (window.innerWidth > 1920) {
            img[i].src = "/images/2880/" + src[src.length - 1]; // Add the file name and extension 
        } 
        else if (window.innerWidth > 1000 && window.innerWidth <= 1920) {
            img[i].src = "/images/1920/" + src[src.length - 1]; // Add the file name and extension 
        } 
        else if (window.innerWidth > 601 && window.innerWidth <= 1000) {
            img[i].src = "/images/1000/" + src[src.length - 1]; // Add the file name and extension 
        } 
        else if (window.innerWidth <= 600) {
            img[i].src = "/images/600/" + src[src.length - 1]; // Add the file name and extension 
        }     
    }

}

resize(); // execute when document is loaded to insert manual images for the first time without resizing

当然，默认情况下加载基本的600宽度文件。

jQuery中的示例：

function resize() {

    var img = $('img.resizable');
    var width = $(window).innerWidth();

    img.each(function(index, element) {

        var name = element.src.split('/') // Split is a native javascript function, which 'splits' the string into an array with the components

        if(width <= 600) {
            $(element).attr('src', 'images/600/' + name[name.length - 1]) // This name[name.length -1] trick is being used to select the 'last value in the string' based on the length of the string.
        }
        else if(width <= 1000) {
            $(element).attr('src', 'images/1000/' + name[name.length - 1])
        }
        else if(width <= 1920) {
            $(element).attr('src', 'images/1920/' + name[name.length - 1])          
        }        
        else {
            $(element).attr('src', 'images/2880/' + name[name.length - 1])          
        }

    })

}

resize();

Answer 3

[Modified] let this is your image tag

<img class="imageid" src="images/Connect-Groups-600.jpg">

then this is the js you are looking for hopefully

var images = document.getElementsByClassName("imageid");
var sizes = ["images/2880/Connect-Groups.jpg","images/1920/Connect-Groups.jpg","images/1000/Connect-Groups.jpg","images/600/Connect-Groups.jpg"];
window.onresize = resize;

function resize() {
  console.log(window.innerWidth);
  if (window.innerWidth > 1920) {
    images[0].src = sizes[0];
  } else if (window.innerWidth > 1000 && window.innerWidth <= 1920) {
    images[0].src = sizes[1];
  } else if (window.innerWidth > 601 && window.innerWidth <= 1000) {
    images[0].src = sizes[2];
  } else if (window.innerWidth <= 600) {
    images[0].src = sizes[3];
  }
}

<img id="imageid" src="images/Connect-Groups-600.jpg">

jQuery function that will change image link

3 个答案: