在网站上，我遇到了页面加载之间出现的白色“闪光”。它看起来很糟糕，因为我使用的是背景图像，并且当页面加载时，背景图像会在它出现在屏幕上之前闪烁 ( take a look for yourself )。此问题发生在 chrome 和 IE 中，但不在 Firefox 中。
该网站有一种预加载东西的方式。页面上的每个元素都在一个 div 包装器中 #website最初位于 display:none ，每个图像都在一个 div 包装器中 #website-images这也是隐藏的。然后站点(使用 jquery 插件)检查 #website-images 中的所有图像是否存在。加载完成后，一旦它们成为 cookie，就会记住该用户已经加载了图像，因此一旦他们转到另一个页面或重新加载当前页面，它就不会进行预加载过程，然后调用 $("#website").show()用于显示网页。
那么是什么导致了页面加载之间的这种闪烁呢？这是我预加载图像的方式吗？我添加了不同的文档类型，并更改了元信息，但没有任何效果。我真的迷失在这里，有没有人有任何想法或见解？
最佳答案
发生这种情况是因为 DOMLoaded 事件在页面实际呈现之前的足够毫秒内被触发。
简而言之，这意味着您必须优化网站的速度。这并不意味着使其下载速度更快，而是意味着以正确的顺序以非阻塞方式下载。
第一步:你的标记
1)
似乎您可以做很多事情来优化您的标记。首先，可以优化样式表和 JavaScript 的顺序。为确保异步下载 CSS 文件，您始终必须在外部 JavaScript 文件之前包含外部 CSS。 style.css在您的部分/所有 JavaScript 调用之后下载。
在外部 CSS 文件和另一个资源之间的头部发现了 1 个脚本块。要允许并行下载，请在外部 CSS 文件之前或下一个资源之后移动内联脚本。
2)
您的主要 JavaScript 文件内联在您的标记中。这不仅会在脚本完成下载之前阻止页面下载，而且在您的内容之前使用它可能会导致(或添加到)白色闪光。
在头部异步加载脚本是我的首选方法。然后，您必须在 DOM 完成加载时触发您的脚本，或者您可以通过将脚本放在 body 标记的底部来实现相同的结果。
第二步:利用浏览器的功能
1) 查看 http header ，有 28 个项目作为单独的 HTTP 调用提供，它们没有缓存在浏览器上(包括 html 页面、jpg 图像、样式表和 JavaScript 文件)。
这些项目是明确不可缓存的，这可以通过编辑您的网络服务器的配置轻松解决。
2) 启用 gzip 压缩。大多数 Web 浏览器(是的，甚至 IE)都支持 gzip 解压缩，并且大多数(如果不是全部)Web 服务器都支持使用 gzip 进行压缩。您甚至可以过度使用 SPDY，它是一种替代的轻量级 HTTP 协议(protocol)(Chrome 和 Firefox 支持)。
第三步:内容服务
您的域提供了大约 30 个单独的项目。首先，考虑如何减少这个请求数量。每个页面 View 30 个 HTTP 请求很多。您可以使用以下方法解决此问题:
1) 跨多个主机名并行下载。浏览器目前限制单个域的并发连接数。从单独的域(例如 img.bigtim.ca)提供您的图像可以允许它们与其他内容并行提供。
2) 将多个项目合二为一。下载的许多项目都是纯粹的样式内容，例如徽标、菜单元素等。它们可以组合成单个图像(仅下载一次)，并使用 CSS 进行拆分。这称为 CSS Sprite 。 Stack Overflow 这样做:look here .
3) 如果您无法减少需要下载的项目数量，您可以通过提供来自无 cookie 域的静态内容来减少您的服务器(进而减少客户端浏览器)的负载。 Stack Overflow 使用其所有静态内容(例如图像、样式表和脚本)来执行此操作。
第四步:优化自己的代码
HTTP 和浏览器技术可以帮助您提高网站速度的功能就这么多。这最后一步取决于你。
1)你有什么理由选择自己托管jquery吗？ Jquery 的下载页面显示了多个 CDN，您可以指向其中的快速缓存脚本下载。
2) 目前您的样式表中有 20 多个未使用的 CSS 规则(占整个 CSS 文件的 36%)。重新思考真正需要什么。
3) JavaScript 的主要部分(在你的 body 标签的顶部)似乎是一个试图加快速度的黑客，但可能没有任何帮助。
正在设置 cookie 以指定页面是否已淡入。您不仅使用 JavaScript 来执行 CSS 可以愉快地执行的转换，而且超过一半的脚本用于定义读取和写入 cookie 的功能。
看到这样的事情:$("body").css ("background-image", "url('images/background.png')");和 $("#website").show ();通常让我咆哮“关注点分离”，但这个答案现在已经足够长了，所以希望你能看到在同一代码中混合样式和功能是不好的做法。
Addendum: Looking at the code, there is no need for jquery at all to perform what you are doing. But then again, there is no need to perform what you are doing, so you could probably do better without any JavaScript at all.
关于javascript - 在页面加载之间闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12358087/
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende
我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("
在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee
我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行
我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co
我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty
📢博客主页：https://blog.csdn.net/weixin_43197380📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正！📢本文由Loewen丶原创，首发于CSDN，转载注明出处🙉📢现在的付出，都会是一种沉淀，只为让你成为更好的人✨文章预览：一.分辨率（Resolution）1、工业相机的分辨率是如何定义的？2、工业相机的分辨率是如何选择的？二.精度（Accuracy）1、像素精度（PixelAccuracy）2、定位精度和重复定位精度（RepeatPrecision）三.公差（Tolerance）四.课后作业（Post-ClassExercises）视觉行业的初学者，甚至是做了1~2年
require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
