jQuery功能，將改變圖像鏈接

Question

我已經得到了我的圖像使用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的解決方案，該解決方案將採用標記並根據屏幕大小更改位置。我也需要這個在移動設備上工作。

例如：

• 如果屏幕比1920瓦特更大，它使用 圖像/ 2880 /連接-Groups.jpg
• 如果屏幕比千瓦特和 1920瓦特或更少更大，它將拉圖像/ 1920/Connect-Groups.jpg
• 如果屏幕介於601和1000之間，它將拉動 images/1000/Connect-Groups.jpg
• 如果屏幕爲600W或更少，它拉的圖像/ 600 /連接-Groups.jpg

如果尺寸檢測失敗，我希望它永遠拉在標籤中的圖像。

我需要這個工作，不管圖像是什麼...我不知道甚至搜索什麼來尋找解決方案來做到這一點。

編輯

在這個月底，我希望能夠把在網頁上...代碼然後將其拉離img標籤的URL，並追加正確的大小夾。

它最終會看起來像在最終用戶方面。

Answer 1

請注意，這種方法是不可持續的，我會不建議使用它爲別的，但它會幫助你解決這個具體問題：

鑑於您的文件夾結構仍然類似於：

圖片/ <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 

而且ofcourse，加載基本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 2

[修改] 讓這就是你的形象標籤

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

那麼這就是你正在尋找希望

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

的JS

Answer 3

差不多相同穆罕默德的回答，但在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">