- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在构建的网站有 4 个大背景图像,它们占据了用户浏览器的整个高度和宽度。它们作为 CSS 背景 div 实现。问题是,在较大的屏幕尺寸上滚动时,它非常滞后和不稳定。当用户按下按钮时,这些图像之间的滚动是通过 JavaScript 自动完成的,因此这是我网站核心功能的一部分,我必须找到一种方法来防止延迟。
到目前为止,我已尝试通过 JS 预加载图像并将图像从 PNG 转换为 JPEG(增加压缩并降低质量)服务器端。这些都不起作用。
图像的最小高度可以是 630 像素。在各部分之间滚动时如何防止延迟?
这是我的代码:
CSS:
body { height: 100%; margin: 0px; font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }
.area { height: 630px; border: 0px solid red; background: repeat-x; margin-bottom: 0px; }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: Av, Helvetica, Arial, sans-serif; color: #292E37; font-weight: lighter; }
#top { position: fixed; width: 100%; height: 10%; background: #292E37; box-shadow: inset 0px -1px 5px #000; z-index: 1000; }
#navigation { float: right; height: 100%; }
#bottom { width: 100%; position: fixed; bottom: 0px; padding: 10px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }
#sceneSelection { top: 20%; position: fixed; padding: 10px; }
#info { margin-top: 50px; margin-bottom: 50px; }
.box { margin-top: 50px; padding: 75px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }
.nav { position: relative; top: 38%; height: 100%; margin-right: 35px; display: inline-block; color: #fff; text-shadow: 0px 1px #000; }
.nav:hover { color: #EA5555; }
.nimage { float: left; width: 16px; height: 16px; position: relative; top: 5%; left: -20%; }
.home { background: url(site_images/icons/nav/home.png); }
.pricing { background: url(site_images/icons/nav/pricing.png); }
.features { background: url(site_images/icons/nav/features.png); }
.blog { background: url(site_images/icons/nav/blog.png); }
.contact { background: url(site_images/icons/nav/contact.png); }
.about { background: url(site_images/icons/nav/us.png); }
.logo { font-size: 2em; text-shadow: 0px 1px #000; padding-top: 10px; padding-left: 15px; color: #EA5555; font-family: Av, Helvetica, Arial, sans-serif; }
.red { color: #EA5555; }
.white { color: #fff; text-shadow: 0px 1px 0px #000; font-weight: bold; }
.dark { color: #202020; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.larger { font-size: 1.25em; }
.buttoni { -webkit-border-radius: 2px; -moz-border-radius: 0px; border-radius: 4px; background: #ddd; display: block; color: #ccc; font-size: 14pt; height: 50px; text-align: right; margin: 10px; cursor: pointer; color: #505050; }
.buttoni:hover { background: #EA5555; color: #fff; }
.btext { padding: 15px; position: relative; top: 25%; }
.groundi { background: url(ground_button.png); }
.skyi { background: url(sky_button.png); }
.stratospherei { background: url(stratosphere_button.png); }
.spacei { background: url(space_button.png); }
.image { height: 50px; width: 50px; float: left; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
li { color: #EA5555; }
li span { color: #505050; }
HTML:
<div class="space area" id="a4">
</div>
<div class="stratosphere area" id="a3">
</div>
<div class="sky area" id="a2">
</div>
<div class="ground area" id="a1">
</div>
JavaScript:
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id).offset().top - margin
}, speed);
}
function match_height() {
var heights = [11, 630, 693, 756, 819, 882, 945, 1008, 1071, 1134, 1197, 1260, 1323, 1386, 1449, 1512, 1575, 1638, 1701, 1764, 1827, 1890, 1953, 2016, 2079, 2142, 2205, 2268, 2331, 2394, 2457, 2520];
var browsery = $(window).height();
var i = 0;
while(browsery > heights[i]) {
i++;
}
var h = heights[i];
$(".area").css("height", h + "px");
$(".area").css("width", "100%");
$(".ground").css("background", "url(scenes/ground/" + h + ".png)");
$(".sky").css("background", "url(scenes/sky/" + h + ".png)");
$(".stratosphere").css("background", "url(scenes/stratosphere/" + h + ".png)");
$(".space").css("background", "url(scenes/space/" + h + ".png)");
}
match_height();
var pos = 0;
$(".buttoni").click(function() {
var id = $(this).attr("id");
if(pos != id) {
scroll_to("a" + id, 2000, 0);
}
pos = id;
});
最佳答案
OP,
对于支持 3d 变换的浏览器,例如:-webkit-transform
,您可以尝试以下操作:
your.div { -webkit-transform: translate3d(0,0,1px); }
可能看起来不太像,但执行上述操作会导致相关的 div 进行硬件加速。
如果您遇到任何闪烁问题(已知它们在某些情况下会出现),以下内容应该可以解决您的问题:
your.div {
-webkit-transform: translate3d(0,0,1px);
-webkit-backface-visibility: hidden;
}
The use of translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use
translate3d
for more power! If your animation is still flickering after switching to the transform above, you can use a few little-known CSS properties to try to fix the problem
希望对您有所帮助。
关于javascript - 大背景图像导致滚动时滞后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12444067/
我有一个简单的应用程序,它读取数据库,然后经过一些操作将结果写入另一个数据库。 第一行代码使用给用户的消息和屏幕日志更新 ui,然后全部包装在带有 using 和其他 try/catch 的 try/
我有一个名为activity的表,其中有一个memberId和一个时间戳。我想找出在给定的月份中有多少成员执行了一项 Activity (即-在 Activity 表中有记录),但在过去12个月中,谁
我有前三列数据。第一个列表示 id 在前一天做了某件事。我试图通过添加一个新变量“new”来从 dat 转到 dat2,该变量执行三件事: 将 yest 的值复制到前一天。但日子并不总是连续的。因此,
我有一个简单的应用程序,它读取数据库,然后经过一些操作将结果写入另一个数据库。 第一行代码使用给用户的消息和屏幕日志更新 ui,然后全部包装在带有 using 和其他 try/catch 的 try/
我有 data.frame,它显示了股票的当前出价和要价以及我当时的信号。 time bid_price ask_price signal 10:10:01.000500
我无法让网站正常运行。它有许多移动背景并使用 css-invert 过滤器。 请看这里: http://epicstudios.de/blackwhite/ 我的问题是,即使是普通计算机也无法处理移动
我创建了一个矩形对象网格并将它们添加到一个 Pane 中。每个矩形都有一个连接到它的鼠标事件监听器,它由 MouseEvent.Entered 触发器触发。当用户将鼠标移到矩形上时,处理程序只是更改矩
感觉我的笔记本电脑不允许控制台应用程序以一定的速度运行,因为我也尝试过其他应用程序,并且它们也随机滞后。我的机器不老,也不应该这样做,它具有i7-4720HQ CPU @ 2.60GHz(8 CPUs
我现在正面临这个问题。当我的页面加载 (DOM) 时,我调用一个返回 1880 张图像的函数,这些图像存储在 Steam 服务器中。 这些图像在回调之后被添加到我的 DOM 中,该回调返回我的数组响应
我正在尝试创建一个每两秒执行一次函数的应用程序。为了实现这一点,我使用 Timer.scheduledTimer 函数。问题是该函数没有按照应有的那样每两秒执行一次。通常应用程序开始时的间隔是 2 秒
我得到了这个 gps 接收器方法,它将一些数据存储到数据库中。 // GPS private void addGPSListener() { globalconstant.db
我有一个 UISwitch,它可以在切换值时更改其上方 UILabel 的文本。每隔一段时间(大约 2% 的时间)文本不会改变。标签的文本被保存到文本文件中,因此我需要准确性。由于这个问题是间歇性的,
我有一个包含用户帖子的表格 View 。每个帖子都有图片、用户名和帖子本身。刷新控件的操作是使用来自 Parse 的数据重新加载表。除了拉动刷新时的极度延迟外,一切都完美无缺。不知道是因为每个单元格里
我有一个“详细信息”页面,其中显示俱乐部的信息。该页面是一个 UIViewController,由按钮和标签组成,以实现这种外观(就像分组的小表格)。当我在设备上加载此页面时,它比我的应用程序中的任何
我有 ActionSheet 的代码,它可以连接的东西有点慢? @IBAction func showAction(_ sender: UIButton) { let actionSheetC
我的桌面应用程序滞后。我认为 java.awt.image.BufferStrategy 中有问题。 private void render() { BufferStrategy bs
你好,我有一个包含多个页面的 viewpager(使用 fragment 状态寻呼机),以及一些 png 作为这些页面的背景。我已经遵循了在 Ui 中显示位图 (http://developer.an
我在 WPF 窗体上有一个 richtextbox 控件。它有 SpellChecking.IsEnabled 设置为 true 并且 VerticalScrollBarVisibility 设置为
在我的 android 应用程序中,我将数据存储在本地 SQLite 数据库中。在这个数据库的大小小于 8-9 MB 之前,一切都很顺利;然而,一旦数据库大小约为 9 MB,它就会继续在 logcat
我正在开发一个简单的 Android 应用程序,它只有一个 Activity ,一个 WebView。它在我的手机(Android 7.1.2 Nougat 版本)上运行良好,但我收到许多用户的投诉,
我是一名优秀的程序员,十分优秀!