关于如何避免在我的旋转木马上进行昂贵的重新喷漆的建议
Advice on how to avoid costly repaint in my carousel?
我正在编写一个旋转木马脚本,该脚本使用web转换来滑动图像。
这里有一个非常简单的小提琴如何工作。http://jsfiddle.net/tUhZe/6/
我想知道是否有人能对如何减少每次过渡开始时发生的昂贵的重新喷漆有什么好主意?
我尝试在这个旋转木马中添加50张图片,但这在性能上造成了重大问题。
window.setInterval( function () {
var element = $('#container'),
active = $('.active'),
next = active.next('.slide');
if (!next.length) {
next = element.find('.slide:eq(0)');
}
// Move next image into position, ready to slide
next.addClass('next');
// Slight delay for next image to move into position
window.setTimeout( function () {
// Start moving active image out
active.addClass('prev');
// Start moving next image in
next.addClass('active')
.removeClass('next')
.bind('webkitTransitionEnd', function () {
next.unbind('webkitTransitionEnd');
// Move offscreen
active.removeClass('active prev next');
// Reassign active
active = next;
});
}, 100);
}, 2000);
简而言之,这就是it脚本的工作方式:
- 活动图像在视图中(给定类"活动")。所有其他图像(没有类"活动")都在屏幕外(顶部:9999px)
- 将下一个图像移到活动图像旁边,为转换做准备
- 活动图像类和下一个图像类被更改,这将触发两者同时从左向右滑动
在转换结束时,活动图像位于屏幕外。
提前谢谢。
可悲的事实是,许多浏览器/计算机硬件组合还没有准备好一次将50个全屏图像加载到窗口中。
然而,我最近构建了一个类似的旋转木马,发现通过巧妙地使用背景图像和简单的逻辑,可以完全避免性能问题。
当屏幕上有太多图像被隐藏或以其他方式显示时,浏览器会出现问题,对吗?因此,如果我们简单地将跨度与背景图像一起使用,这些背景图像只有在包含的元素处于活动状态或前一个/后一个元素时才加载。
我不善言辞,让我给你看看;
http://jsfiddle.net/DUWMy/
<div class="slideshow">
<span class="image-1 active"></span>
<span class="image-2"></span>
<span class="image-3 prev"></span>
</div>
.slideshow .prev.image-1,
.slideshow .active.image-1{ background-image:url('http://lorempixel.com/output/technics-q-c-400-300-7.jpg'); }
.slideshow .prev.image-2,
.slideshow .active.image-2{ background-image:url('http://lorempixel.com/output/nightlife-q-c-400-300-5.jpg'); }
.slideshow .prev.image-3,
.slideshow .active.image-3{ background-image:url('http://lorempixel.com/output/city-q-c-400-300-7.jpg'); }
在上面的fiddle中,我刚刚拼凑了一个快速幻灯片,需要注意的是,在css中,除非存在active或prev类,否则不会应用背景图像。
http://jsfiddle.net/DUWMy/1/
上面的fiddle简单地显示了屏幕上的所有元素,你可以看到只要一个元素失去了prev的类,激活了它就会失去背景图像。这意味着屏幕上的图像更少,嘿,你不应该经历所有额外的滞后。
您可能已经找到了另一个解决方案,但这是一个需要记住的方便方法。同样适用于响应式布局。
相关文章:
- Bloodhound的新Typeahead是如何处理错误的
- 当我打印它新标签时如何保持页面设计 Jquery.
- 谷歌浏览器的“新标签”iframe如何工作
- 火狐/Chrome扩展:创建新标签时如何打开链接
- 如何在类似于Twitter的新弹出窗口中单击时显示放大的图像
- 如果WordPress中有新帖子,如何显示通知栏
- 如何打开新窗口/选项卡,但专注于打开窗口
- 纠结于如何添加“;“全选”;功能与折扣
- Facebook”;类似于“-如何使登录选项卡重定向到另一个选项卡
- 如果在素数面数据表中添加新行,如何检测表单中的变化
- 困惑于如何编写OO Javascript来实现简单的类模式
- Javascript表单提交到新页面——我如何将它保持在同一页面上
- Javascript连接一个函数,类似于如何添加文本
- 如何将现有的渐变效果代码应用于新元素
- 使用jQuery将新的css应用于元素,如何添加转换
- 用jQuery添加新的输入.如何修复它
- 如何在键事件处理程序中获得HTML文本元素的新值,也适用于特殊键
- 在dojo.gridX中添加新行时如何聚焦第二个Cell
- 如果会话是新的,如何签入 JavaScript
- 如何在保留以前的字段值的同时使用 innerHTML 创建新字段?如何在再次调用之前完全执行 .click