Question

我有一个移动网站。它是基于ajax的，当从主屏幕中的表中单击一行时，div用ajax数据填充，然后淡入，占据整个窗口，处于固定位置。然后用户可以导航div，就好像它是一个单独的窗口但可以退回到主表（淡出固定的div）。因此，当用户导航固定div时，实际上在后台还有主页面体。禁用/隐藏后台主页会使网站对于移动设备更轻量级吗？结构类似于：

<html>
<head>
<script>
function navigateIn(url){
$.get(url,function(data){ //get data from url
$('#navigate').html(data); //put data into div
$('#navigate').fadeIn(200,function(){ //fade in div
//Now, after div is faded in, hide the background:
$('#main').css('overflow','hidden'); //Is this helpful?
$('#main').css('visibility','hidden'); //Is this helpful?
$('#main').css('display','none'); //Is this helpful? This void the scrolltop of the body, so it's not my greatest choice
});
});
}
function navigateOut(){
//Display the main page before back out!
$('#main').css('overflow',''); 
$('#main').css('visibility',''); 
$('#main').css('display','');
$('#navigate').fadeOut(200);
}
</script>
<style>
#navigate {
position: fixed;
height: 100%;
width: 100%;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
</style>
</head>
<body>
<div id="main">
<button onclick="navigateIn('http://www.test.com');">Navigate In!</button>
</div>
<div id="navigate"></div>
</body>
</html>

这是一个显示我正在谈论的内容的jsfiddle：jsfiddle 但效果有点不同，因为它不是全屏视图。我实际上并不知道如何自己测试它是否有用（或者甚至更糟）隐藏内容。所以我问你。 PS：我知道它在淡入时并不是一个美丽的效果，但实际上我从正确的延伸中做了一个幻灯片，所以它更好......

隐藏背景元素是个好主意？

0 个答案: