Question

我正在尝试像任何其他图像一样缓存我的favicon图像，但是我没有在缓存中看到它，也没有收到我的确认console.log，也没有在我断开互联网时看到它（基本上它是不缓存）。

我想缓存它以便我可以离线访问它，因此如果互联网断开连接，我可以动态更改图标。

我的HTML：

<link id="favicon" rel="icon" type="image/png" src="assets/favicon-red-16x16.ico.png">

我的js：

// cache images
function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        console.log('caching image...')
        var img = new Image();
        img.onload = function() {
            console.log('image cached')
            var index = list.indexOf(this);
            if (index !== -1) {
                // remove image from the array once it's loaded
                // for memory consumption reasons
                list.splice(index, 1);
            }
        }
        list.src = array[i];
    }
}
preloadImages(["../assets/favicon-green-16x16.ico.png", "../assets/favicon-red-16x16.ico.png"]);

问题：是否可以缓存favicon客户端？还有其他方法可以在本地存储吗？

如果我转换为base64如何从本地存储中存储和获取它？

PS。使用Chrome最新版

＆lt; ___ UPDATE ___＆gt;

虽然这个问题在技术上得到了解答，但我怎么能这两个存储2（多个）base64图像呢？我无法弄清楚如何在画布或2幅画布上画2。

Answer 1

试试这个代码朋友。你可以隐藏iconImage img元素。我使用的另一个img标签仅用于测试，因此您可以将其删除。

<!DOCTYPE html>
<html>
<link id="favicon" rel="icon" href="img_the_scream.jpg" />
<body>

<img id="iconImage"  src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<br />
<img id="img" width="220" height="277"/>
<script>

function onLoadHandler() {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("iconImage");
    var base64Image = localStorage.getItem("lsFavicon");
    var favicon = document.getElementById("favicon");
    var img2 = document.getElementById("img");

    if (base64Image == null && document.navigator.onLine) {
        ctx.drawImage(img, 0, 0);
        base64Image = canvas.toDataURL();
        localStorage.setItem("lsFavicon", base64Image);
        favicon.setAttribute("href", base64Image);
    }
    else if (base64Image != null) {
        favicon.setAttribute("href", base64Image);
        img2.setAttribute("src", base64Image);
    }
}

window.onload = onLoadHandler;
</script>

</body>
</html>

如何缓存favicon javascript

1 个答案: