HTML网页第一次和第二次载入不同（Google Chrome） [英] HTML page loads different first and second time (Google Chrome)

问题描述

我有一个HTML页面，第一次加载它，第二次加载一种方式。

第一次：

SECOND（AND LATER）TIME：

我没有看到这样的问题之前，我有麻烦寻找其他投诉。有关开始调查的任何建议吗？

EDITS

感谢您的反馈。只是为了澄清几件事。 CSS只是标准的Bootstrap 3.0，没有其他样式或CSS。网址为 https://www.acls.net/index-exp120.php 而且这是已停用所有扩展程序的Chrome私人模式。我只在Chrome中看到此问题，已更新标题以反映此问题。

解决方案

p>

• 只有在使用空缓存时才会发生


• 取决于font-awesome&

因此，在无痕模式下运行Chrome时，最终会重新载入我可以重现这个问题。

你不能轻易解决加载争用条件，但修复你的css应该工作：

1. 添加类拉左到您的徽标


2. 通过应用类<$ c清除浮动区域$ c> clearfix 到页眉


3. 它不是必需的，但是很好的选择，添加 width ; height 到您的徽标图片，因此在加载后不会弹出。

所以这里是：

 < div class =page-header clearfix> 
< a href =/class =logo pull-left> 
< img src =images / logo.pngheight =62width =232alt => 
< / a> 
  

希望有帮助。

I have an HTML page that loads one way the first time you load it and another way the second time. This is reproducible using Chrome in private mode (because it clears the cache each time).

FIRST TIME:

SECOND (AND LATER) TIME:

I haven't seen a problem like this before, and am having trouble searching other complaints on this. Any advice on where to start investigating?

EDITS

Thanks for all the feedback. Just to clarify a few things. The CSS is standard Bootstrap 3.0 only, there is no other styling or CSS. The URL is https://www.acls.net/index-exp120.php and this is Chrome Private mode with all extensions disabled. I only see this issue in Chrome, have updated title to reflect that.

解决方案

Ok - the issue depends on multiple things

• only might happen with an empty cache
• depends on the loading speed of font-awesome & bootsrap - if they load faster than your logo or not...

So while running Chrome in Incognito Mode and reloading again and again eventually I could reproduce the issue.

You cannot easily fix the loading race condition but fixing your css should work :

1. add class pull-left to your logo
2. clear the floated area by applying class clearfix to the page-header
3. Its not necessary but good choice, add width & height to your logo image so it doesn't pop in once loaded

So here it is:

<div class="page-header clearfix">
    <a href="/" class="logo pull-left"">
        <img src="images/logo.png" height="62" width="232" alt="">
    </a>

Hope that helped.

这篇关于HTML网页第一次和第二次载入不同（Google Chrome）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！