jQuery函数，将改变图像链接

jQuery function that will change image link

本文关键字：图像 链接 改变 函数 jQuery      更新时间：2023-09-26

我使用srcset为我的图像获得了以下代码。我宁愿完全远离srcset。我想用一个特定的类来处理所有的图像。

<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=""/>

有谁知道使用jquery的解决方案，将采取标签，并根据屏幕大小改变位置。我需要这个工作在移动设备也

,

  • 如果屏幕大于1920w，则使用图片/2880/Connect-Groups.jpg
  • 如果屏幕大于1000w1920w或更小，它会拉出图片/1920/Connect-Groups.jpg
  • 如果屏幕在601和1000之间，它将拉图片/1000/Connect-Groups.jpg
  • 如果屏幕是600w或更小，它拉图像/600/Connect-Groups.jpg

如果大小检测失败，我希望它总是在标签中拉图像。

我需要这个工作，无论什么图像是…我甚至不知道如何寻找解决方案来做到这一点。

编辑

在这结束时，我希望能够把在页面上…然后代码将从img标签中提取URL，并附加正确的大小文件夹。

它最终看起来像最终用户端。

请注意，这种方法是不可持续的，我将不建议使用它用于其他任何事情，但它将帮助您解决这个特定的问题:

假设你的文件夹结构仍然是这样的:

images/<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();

与Muhammad的答案几乎相同，但使用了jQuery。如果你想按类做，只需删除'#'并添加'.'

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">

[Modified]设这是你的图像标签

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

那么这就是你要找的js希望

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">

相关文章：