在HTML5圖片srcset中附加數據

Question

現在，即時通訊正在執行您在此處看到的操作：

$("#wrapper").prepend('<header> <picture> <source media="(max-width: 999px)" srcset="Images/Small/Primary-Logo.png", "Images/Small/2x/Primary-Logo.png 2x", "Images/Small/3x/Primary-Logo.png 3x"> <source media="(min-width: 1000px)" srcset="Images/Big/Primary-Logo.png", "Images/Big/2x/Primary-Logo.png 2x", "Images/Big/3x/Primary-Logo.png 3x"> <img src="" alt="Main Logo"> </picture> </header>')

我的問題是，是否有一種方法可以將數據巧妙地插入到每個源中，而不必在前面添加大塊文本。

例如，將所有srcsets“”保留為空，並通過追加添加網址。

我該怎么做呢？

Answer 1

因此，首先，這是：

srcset="Images/Small/Primary-Logo.png", "Images/Small/2x/Primary-Logo.png 2x", "Images/Small/3x/Primary-Logo.png 3x">

應該：

srcset="Images/Small/Primary-Logo.png, Images/Small/2x/Primary-Logo.png 2x, Images/Small/3x/Primary-Logo.png 3x">

看看這個以獲得更多信息 。

這是我能想到的解決方案。 看看這是否有幫助，也可以隨時修改此代碼以適合您的需求。

var $wrapper = $("#wrapper");

var imageSrcs = {
    "tablet": ["Images/Small/Primary-Logo.png", "Images/Small/2x/Primary-Logo.png 2x", "Images/Small/3x/Primary-Logo.png 3x"],
    "desktop": ["Images/Big/Primary-Logo.png", "Images/Big/2x/Primary-Logo.png 2x", "Images/Big/3x/Primary-Logo.png 3x"]
};

$wrapper.prepend('<header> <picture> <source media="(max-width: 999px)" data-screen="tablet"> <source media="(min-width: 1000px)" data-screen="desktop"> <img src="" alt="Main Logo"> </picture> </header>')

$wrapper.find("[data-screen]").each(function() {

    var screenType = $(this).data("screen");
    $(this).attr({
        'srcset': imageSrcs[screenType].join(", ")
    });
});