我有一个 Isotope图库(第 2 版)包含近 400 个元素。典型的图库项目如下所示:
<div class="element hybrid a" data-category="hybrid">
<p class="type">H</p>
<h2 class="name">Name</h2>
<p class="strain-info">No Info Available</p>
<p class="review"><a class="button radius small black review-form-lb" href="#review-form-lightbox">Review</a></p>
</div>
例如，当我运行下面的代码时，它基本上向单击的元素添加了一个类，放大该元素需要几秒钟。
$container.on( 'click', '.element', function() {
$( this ).toggleClass('large');
$container.isotope('layout');
});
另一个例子是，如果我有一个包含多个选项的按钮组来过滤画廊，同样需要几秒钟。过滤JS:
$('#filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = '';
for ( var prop in filters ) {
filterValue += filters[ prop ];
}
// set filter for Isotope
$container.isotope({ filter: filterValue });
});
这是$container的变量
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.element',
layoutMode: 'fitRows',
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});
我应该注意到上面的代码在项目数量较少时效果很好。我怎样才能提高图库的性能？
我应该注意到，在 Isotopes 的第 1 版中，我有相同的图库并且工作正常。我正在升级，因为同位素 v2 的能力增强了。
Here is the live site - 重要的! - 这个网站是为美国科罗拉多州的一家大麻药房设计的。网站可能不适合工作。
更新
我尝试将所有 div 更改为 li 元素。没有看到太大的改进。
我尝试根据 mfirdaus 的回答打开硬件加速，但似乎没有用。
注意:上面的实时网站链接是精简版，我删除了同位素图库不需要的所有内容。它比我最初发布时稍微快一点，但是，它需要更快地响应。尝试在平板电脑上使用它，Isotope 项目需要几秒钟才能响应。
更新 2
Isotopes 的第一个版本在大型画廊中表现得更好，因此我最终使用了第一个版本。
最佳答案
我有一个建议。首先，您可以将 css 属性 transform:translate3d(0,0,0) 添加到您的 .element css 选择器。这会打开硬件加速，应该会加快页面回流。这是一个常用于使高度动画化的页面更流畅的技巧，尤其是在移动设备上。所以类似的东西:
.element {
...
/* add this. prefixes for compabtibility */
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
}
在我的测试中，它似乎可以很好地加快速度。
另一个建议是将 .on("click") 替换为 .on("mousedown")。 click 在鼠标松开后触发，而 mousedown 会在用户按下鼠标后立即触发。大约有 ~0.2 秒的差异，但有点明显。
Here's an example made from isotope's default example which has 400 elements.
在测试完 touchstart 后，它有点帮助，但即使在滚动时也会触发。因此，这仅在您禁用滚动/具有固定视口(viewport)时才有用。也许您可以添加 iScroll，但我认为这会更加臃肿。
您可以尝试的一个选项是先强制元素调整大小，然后再等待同位素重新计算位置。我们可以通过在同位素刷新上使用 setTimeout 来做到这一点。不确定这种行为是否可以接受，但这将使用户能够更快地获得反馈。所以你的切换代码将是这样的:
$container.on( 'click', '.element',function() {
$( this ).toggleClass('large');
setTimeout(function(){ $container.isotope('layout'); },20); //queue this later
});
Demo .在我的 Android 设备上对此进行了测试，似乎有所改进。
关于javascript - 大型同位素画廊非常慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23819729/
Rails相对较新。我正在尝试调用一个API，它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController，并且我已经阅读了几个HTTParty指南，直到我想要什么，但也许我只是有点迷路，真的不知道该怎么做。基本上，我需要做的就是调用API，获取它返回的URL，然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码？ 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我想在ruby中生成一个64位整数。我知道在Java中你有很多渴望，但我不确定你会如何在Ruby中做到这一点。另外，64位数字中有多少个字符？这是我正在谈论的示例......123456789999。@num=Random.rand(9000)+Random.rand(9000)+Random.rand(9000)但我认为这是非常低效的，必须有一种更简单、更简洁的方法来做到这一点。谢谢! 最佳答案 rand可以将范围作为参数:pa=rand(2**32..2**64-1)#=>11093913376345012184putsa.
我刚刚在我的Ubuntu9.10服务器上安装了TeamBox。我使用提供的服务器脚本在端口3000上启动并运行它。它的运行速度非常慢，从另一台计算机连接时每个HTTP请求最多需要30秒。我使用链接从shell加载TeamBox，一点也不花时间。然后我设置了一个SSH隧道，它再次运行得非常快。我通过此服务器上的apache以及SAMBA等运行了大约30个虚拟主机，没有任何问题。我该如何解决这个问题？ 最佳答案 我的redmine(ruby，webrick)太慢了。现在我解决了这个问题:apt-getinstallmongrelruby
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
我的生产Rails应用程序需要167秒来运行rakedb:migrate。可悲的是，没有要运行的迁移。我试图在检查是否有待处理的迁移时调整运行的迁移，但随后检查花费了同样长的时间。我心目中唯一的“借口”是数据库并不小，那里有1M条记录，但我看不出这有什么关系。我查看了日志，但没有任何迹象表明出了什么问题。我在运行ruby2.2.0rails4.2.0有没有人知道为什么会这样，是否有什么办法可以解决？ 最佳答案 运行rakedb:migrate任务还会调用db:schema:dump任务，这将更新您的db/schema.rb。因此，即
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如
出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=
我目前正在开发一个ruby应用程序，但它运行得非常(非常!)慢..到目前为止，我已经尝试了几件事，我可以将其缩小到主要问题:Ruby正在尝试在$LOAD_PATH的每个目录中查找它的需求。基本上我所观察到的是，ruby正在查看大量文件，试图查看那里是否存在需求。如果找不到它们，它将转到下一个目录。好消息是我可以通过strace看到这种情况。有很多这样的输出:open("/boa_proj_build/nsteen/.gem/gems/i18n-0.7.0/lib/commander/help_formatters/base.rb",O_RDONLY|O_CLOEXEC)=-1ENO