类固醇和Angular:从数据中预加载多个webview

Steroids and Angular: Preloading Multiple Webviews from data

本文关键字:加载 webview 数据 Angular 类固醇      更新时间:2023-09-26

我正在使用类固醇生成器ng-resource,它基于一些本地json数据生成控制器/模型/视图。它有一个index.html和一个detail .html

样板代码提供了您点击的汽车列表,将您带到汽车详细页面的新webview。很容易。问题是,这个视图不是预加载的——它是在您单击汽车列表中的汽车后加载的。这创造了一种滞后的体验。

我读过关于预加载webviews的文章——如果你没有一堆由动态数据驱动的webviews,它会很好地工作。我想预装基于"汽车"的初始列表的所有详细的网页视图。我一直在阅读以下资源:

预加载来自应用程序不同部分的webview

在webviews之间共享数据

预加载webview

我没有太多的原始代码可以提供——只有ng-resource的样板示例。我想知道最适合我需要的技术方法是什么。试图在导航时获得原生应用的感觉。

编辑:这是来自Appgyver/Steroids团队的一个更好的答案

根据你所描述的用例,我建议你在你的应用程序中预加载show.html一次,然后每当你需要显示show.html时,你会从你正在移动到show.html的视图发送一个postmessage,它应该加载所提供id的内容。

如果你必须从远程服务器加载内容,你应该发送两个postmessage,第一个包含你已经在前一页上的任何信息,这些信息将用于show.html页面。

我不知道我是否能用最容易理解的方式解释这个,但如果我的解释不清楚,请多问问题)结果很简单:


我的解决方案下面的主要问题是创建大量的webview的内存问题

老回答:For (var I =0;我

       var webView = new steroids.views.WebView({location:"/views/cars/show.html?        id="+id,id:id});
console.log(webView);
webView.preload({}, {
onSuccess: function() {
//steroids.layers.push(webView);
console.log('working');
 }
});
}

然后用另一个函数调用具有相同id的webview:

  $scope.open = function(id) {
var webView = new steroids.views.WebView({location:"/views/cars/show.html?id="+id,id:id});
steroids.layers.push(webView);
};