HTML网页第一次和第二次载入不同（Google Chrome）

本文介绍了HTML网页第一次和第二次载入不同（Google Chrome）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

第一次：

SECOND（AND LATER）TIME：

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

EDITS

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

解决方案

p>

• 只有在使用空缓存时才会发生
• 取决于font-awesome&

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

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

添加类拉左到您的徽标

通过应用类 clearfix 到页眉

它不是必需的，但是很好的选择，添加 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 www.acls/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 :

add class pull-left to your logo

clear the floated area by applying class clearfix to the page-header

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.