在 Windows Metro App 中缓存背景答案

【问题标题】：Caching a background in Windows Metro App在 Windows Metro App 中缓存背景
【发布时间】：2012-07-05 17:32:24
【问题描述】：

我正在开发一个 WinJS Windows Metro 应用程序，并且在我的一个页面上，我正在获取要显示为背景的图像的 URL。我可以通过使用 url（图像的 URL）并将其设置为 style.backgroundImage 来使其正常工作。

我需要在链接页面上使用相同的图像，但这意味着我必须发出另一个 HTTP 请求，而我正试图避免这种情况。我研究了替代方案，发现 LocalFolder 作为一个选项。唯一的问题是我不知道如何访问该文件并将其设置为背景。

这是缓存数据以减少网络通话的正确方法吗？

这是我正在使用的代码：

function saveBackground(url) {
    localFolder.createFileAsync("background.jpg", Windows.Storage.CreationCollisionOption.replaceExisting).then(function (newFile) {
        var uri = Windows.Foundation.Uri(url);
        var downloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
        var promise = downloader.createDownload(uri, newFile);
        promise.startAsync().then(function () {
            //set background here.
            var wrapper = document.getElementById("wrapper").style;
            localFolder.getFileAsync("background.jpg").then(function (image) {

                console.log(image.path);
                var path = image.path.split("");
                var newLocation = [];
                //This is just to make the backslashes work out for the url()
                for (var i = 0; i < path.length; i++) {
                    if (path[i] != '\\') {
                        newLocation.push(path[i]);
                    } else {
                        newLocation.push('\\\\');
                    }
                }
                console.log(newLocation);
                var newPath = newLocation.join("");
                var target = "url(" + newPath + ")";
                wrapper.backgroundImage = target;
                console.log(wrapper.backgroundImage);
                wrapper.backgroundSize = "cover";

            });
        });
    });
}

【问题讨论】：

标签： javascript microsoft-metro

【解决方案1】：

这取决于您要传输的图像类型和数量。如果只有一张图片而不是重张图片（大约WinJS.xhr，它允许您下载数据，更重要的是，它会在调用后立即下载数据。

BackgroundTransfer 应该用于视频、音乐、大图像等大数据。

关于图像的缓存，是的，您当然可以使用本地文件夹来执行此操作（您应该这样做）。

你应该看看大卫·卡图赫写的这个系列文章，真的很棒

http://blogs.msdn.com/b/eternalcoding/archive/2012/06/15/how-to-cook-a-complete-windows-8-application-with-html5-css3-and-javascript-in-a-week-day-0.aspx

希望对您有所帮助。

【讨论】：