Question

我有一个脚本，可以在我的网站上生成产品“卡片”。这些产品卡包含产品的图像。最初加载时，它们具有占位符图像的大小很小，以指示实际的产品图像仍在加载（延迟加载）。

但是，当我检查网络活动时，正在为页面上的每个实例下载并重新下载占位符图像[ blank.gif ]。这会影响页面的加载，从而缩短使用延迟加载脚本节省的时间。

screenshot of images loading in the network tab of dev console

当前，卡片的HTML组合成一个变量，然后一次附加到页面HTML主体中的相应位置。 请参见下文

如何使图像仅从服务器加载一次，并显示在其所属的多个位置？

卡代码：

    // Simplified for Stack Exchange
    // A JSON file contains activeCards which this script pulls data from

    var cardImgs = '';

    for (let i of activeCards) {

        cardImgs = "<img class='soloImg' src='images/blank.gif' data-src='images/" + i.img + "' alt='" + i.imgAlt + "' />";

        // Builds card HTML from elements above
        card = "<div class='card' id='" + i.id + "'>" +
            "<div class='cardImagesCont'>" + cardImgs + "</div>" +
            "<h2>" + i.title + "</h2>" +
            "<h4 class='itemDesc'>" + i.description + "</h4></div>";

        // Adds card to section
        $('.cardSection').append(card);
    }

延迟加载代码：

function lazyload() { 
    for (let i of $('img[data-src]')) {
        $(i).attr('src', $(i).attr('data-src'));
    }
}

我是自学成才的，因此，如果这段代码有一些令人震惊的错误，请不要太残忍（但请告诉我）

生成元素时如何防止多次加载同一图像？

0 个答案: