受css内嵌样式中使用 url 影响,页面出现多次加载问题

转载 2015年11月18日 16:45:40

页面内嵌样式表中使用url(), 出现页面多次载入问题解决

来源:互联网 作者:佚名 时间:11-20 08:44:40   
在最近的一个项目中,为了跟踪用户的登录的次数,我们在页面打开时,将用户登录页面的信息进行记录,可在测试中却发现一个用户访问一次的页面,却被记录了二次,也就是说页面被载入了二次。
在最近的一个项目中,为了跟踪用户的登录的次数,我们在页面打开时,将用户登录页面的信息进行记录。可在测试中却发现一个用户访问一次的页面,却被记录了二次,也就是说页面被载入了二次。进一步测试后发现此问题,只是在FireFox,Google Chrome浏览器上才会出现。通过使用Fiddler监控发现,页面在很短的时间内被浏览器载入了二次。 
发生如此离奇的问题,让我们百思不得其解。因为在页面中,并不存在通过Javascript来触发页面刷新;也不存在页面的特殊设置,让页面自动进行定时的刷新功能。不得已,只能采用笨方法,将页面中的内容一点点的删除掉,最后发现当页面内嵌的样式存在时,页面就会被重复载入。样式如下: 

复制代码
代码如下:

<style type="text/css"> 
content-wrap .wrap-main{background:url();} 
content-wrap .wrap-main .colcomm .more{} 
tem-main .left .col,.tem-main .left-3 .col,.tem-main .right-3 .col{margin-bottom:5px} 
</style> 

在样式表中,为了将来自样式文件中的.wrap-main的背景图片给忽略掉,这里采用了在页面文件中再次定义了.wrap-main的背景图片,所以就出现了样式表中第一行出现的 

content-wrap .wrap-main{background:url();} 
通过分析认为,页面的二次加载的问题,很可能会与该处的样式设置有关,于是将样式修改为等价的: 

content-wrap .wrap-main{background-image:none;} 
再次运行页面,并通过Fiddler进行跟踪,这次页面只加载了一次。看来问题确实是由于在页面的内嵌样式中错误地使用了url()引起的。

针对这个问题,我进一步进行了分析,得到如下结论: 
1)在页面内嵌的样式表中,如果出现url()或url("")之类的,FireFox、Google Chrome浏览器会将url()或url("")解析为当前页面的地址,所以会再次请求同一个页面,这样就出现了同一个页面被载入二次的问题。因此,如果要在内嵌样式表中实现诸如取消背景图片的样式时,可以采用background-image:none而不要采用background:url(). 
2)在.CSS文件中是的样式,如果出现url()或url(""),同样会导致.CSS文件被加载二次的问题。只是由于.CSS文件常常会在本地有缓存,所以当发现文件没有修改时就不会再次请求同一个.CSS文件。

关于jeesite的陷阱需要注意

刚学习jeesite,其框架主要为: 后端 核心框架:Spring Framework 4.0 安全框架:Apache Shiro 1.2 视图框架:Spring MVC 4.0 服务端验证...
  • aqsswe
  • aqsswe
  • 2015年08月19日 15:35
  • 38388

CSS的三种使用方法。 行内样式: 内嵌式: 外部式:

三中的使用方法的简单实例如下: 行内样式: css行内样式 > 内嵌样式: !doctype html> css内嵌样式 #div{width:100px;he...
  • voins
  • voins
  • 2016年07月05日 10:22
  • 22347

CSS样式中内联、嵌入、外部样式

内联样式 内联样式是使用style属性添加到元素的样式。 This is a paragraph. 嵌入样式 当单个文档需要特殊的样式时,就应该使用嵌入样式表。你可以使用 标签在文档头部...
  • sunshinerou
  • sunshinerou
  • 2017年05月28日 08:29
  • 1364

页面加载样式闪现问题

css样式闪现,页面加载顺序
  • fengjingyu168
  • fengjingyu168
  • 2017年06月07日 15:17
  • 548

BIRT样式问题

1.右键单击工程,选择new>Other>Web>CSS,建立一个CSS文件,比如birt.css2.在birt.css里写样式,如果CSS不熟的话,可以到我的CSDN共享资源里下载,这个报表能应付一...
  • bhltweb
  • bhltweb
  • 2009年08月04日 08:37
  • 5677

iOS开发之加载html无CSS样式的解决办法

在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图...
  • hbblzjy
  • hbblzjy
  • 2017年03月06日 16:24
  • 1883

ssm遇到css样式和js加载不出来

今天在写项目的时候遇到一个问题就是css样式和js样式出不来,昨天还能出来,检查了路径什么的都没有错。 在网上也百度了 大部分都说路径错了,可是路径明明就是对的。最后发现是 原来写的是*.do  ...
  • two_people
  • two_people
  • 2016年07月28日 10:30
  • 4043

嵌入CSS的四种方式

CSS与HTML文档结合的4中方法: 1 使用元素链接到外部的样式文件 2 在元素中使用"style"元素来指定 3 使用CSS "@import"标记来导入样式表,可以用一个文件import多个 ...
  • xxssyyyyssxx
  • xxssyyyyssxx
  • 2015年10月09日 15:53
  • 320

html5实现正在加载中样式

css: .sk-fading-circle {  width: 40px;  height: 40px;  position: relative;  } .sk-fading-circl...
  • hunannanhu
  • hunannanhu
  • 2016年03月04日 10:33
  • 2193

JS A页面跳转B页面后,B页面样式全部失效

页面跳转是最平常不过得操作。我比较常用的是loaction.href=”XXX.html”,但是从A页面跳转到B页面之后,B页面的样式全都乱掉了。如果你也遇到了这样的情况,希望从 以下几个方面去排查。...
  • wanglufei_1992
  • wanglufei_1992
  • 2016年08月01日 09:27
  • 1178
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:受css内嵌样式中使用 url 影响,页面出现多次加载问题
举报原因:
原因补充:

(最多只允许输入30个字)