Jquery mobile 如何利用jquery mobile和phone gap提高图像加载速度？
我正在使用phonegap和jquery mobile。我正在使用json/jquery将一些图像加载到DOM中。我发现图像的加载速度通常很慢。关于如何改进这一点有什么想法吗Jquery mobile 如何利用jquery mobile和phone gap提高图像加载速度？,jquery-mobile,cordova,Jquery Mobile,Cordova,我正在使用phonegap和jquery mobile。我正在使用json/jquery将一些图像加载到DOM中。我发现图像的加载速度通常很慢。关于如何改进这一点有什么想法吗 http://www.apache.org/licenses/LICENSE-2.0 除非适用法律要求或书面同意， 根据许可证分发的软件在 “按原样”的基础上，没有任何 种类，无论是明示的还是暗示的。请参阅许可证以获取详细信息 管理权限和限制的特定语言 根据许可证。 --> //等待Cordova加载 // 文件。添加
http://www.apache.org/licenses/LICENSE-2.0
除非适用法律要求或书面同意，
根据许可证分发的软件在
“按原样”的基础上，没有任何
种类，无论是明示的还是暗示的。请参阅许可证以获取详细信息
管理权限和限制的特定语言
根据许可证。
-->
//等待Cordova加载
//
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
//Cordova已加载，现在可以安全地调用Cordova方法
//
函数ondevicerady（）{
//检查应用程序是否已连接
if（checkConnection（）==“无网络连接”）{
警报（'请连接到internet'）
}
//如果应用程序有互联网
否则{
//$.mobile.showPageLoadingMsg（“d”，“放松，伙计。我们正在加载今天的图片。”）；
加载历史（）；
//$.mobile.hidePageLoadingMsg（）；
$（document）.on（'vclick'，'load#u more'，function（）{
警报（“点击按钮”）；
})
}
}
函数checkConnection（）{
var networkState=navigator.network.connection.type；
变量状态={}；
状态[Connection.UNKNOWN]=“未知连接”；
状态[Connection.ETHERNET]=“以太网连接”；
状态[Connection.WIFI]=“WIFI连接”；
状态[Connection.CELL_2G]=“CELL 2G Connection”；
状态[Connection.CELL_3G]=“CELL 3G Connection”；
状态[Connection.CELL_4G]=“CELL 4G Connection”；
状态[Connection.CELL]=“单元通用连接”；
状态[Connection.NONE]=“无网络连接”；
返回状态[网络状态]；
}
函数loadHistory（）{
$.mobile.showPageLoadingMsg（“d”，“放松，伙计。我们正在加载今天的图片。”）；
//加载历史图片
var历史记录http://whispering-spire-7120.herokuapp.com/category/history';
$.getJSON（历史\ url，函数（json）{
$.each（json，函数（i，项）{
$（“#所有图片”）.append（””+item.title+”
'）；
});
$.mobile.hidePageLoadingMsg（）；
});
}
桌面-主页
桌面
加载更多
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!-- Jquery mobile css -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<!-- Jquery javascript -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Cordova/phonegap js -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!-- Parse json + display -->
<script type="text/javascript">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
// Check if app has connectivity
if ( checkConnection() == 'No network connection' ) {
alert('Please connect to the internet')
}
// If app does have internet
else {
// $.mobile.showPageLoadingMsg("d", "Relax, dude. We're loading today's pictures.");
loadHistory();
// $.mobile.hidePageLoadingMsg();
$(document).on('vclick','#load_more', function() {
alert('button clicked');
})
}
}
function checkConnection() {
var networkState = navigator.network.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.CELL] = 'Cell generic connection';
states[Connection.NONE] = 'No network connection';
return states[networkState];
}
function loadHistory(){
$.mobile.showPageLoadingMsg("d", "Relax, dude. We're loading today's pictures.");
// Load history pictures
var history_url='http://whispering-spire-7120.herokuapp.com/category/history';
$.getJSON(history_url,function(json){
$.each(json,function(i,item){
$("#allpictures").append('<center><img src = "'+item.url+'" style = "height: '+Number(item.old_height) * 300 / Number(item.old_width)+'px; width: 300px;"></center><p style = "margin-left:10px; margin-right:10px; font-size:15px;">'+item.title+'</p><br/>');
});
$.mobile.hidePageLoadingMsg();
});
}
</script>
<!-- End parsing json + display -->
<title> TablePics - Home</title>
</head>
<body>
<!-- Beginning of page1 -->
<div data-role="page" data-theme="c" id="main_bg">
<!-- Header -->
<div data-role="header" data-theme="b">
<h1>TablePics</h1>
</div>
<!-- Content -->
<div data-role="content" id = "allpictures">
<!-- Display results of parsing json here -->
</div>
<!-- end of content -->
<div data-role="footer" data-theme="b">
<div data-role="navbar">
<a id ="load_more" data-role="button" data-theme="b">Load more</a>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<!-- End of page1 -->
</body>
</html>
<!-- Certificates for iPhone: http://www.youtube.com/watch?v=u37QMKFZl0k -->