笔记-CSS空背景图片会导致页面被加载两次

如果页面样式的背景图片路径设置为‘‘ 或 ‘#‘, 会导致页面被重复加载两次 (Chrome.56.0.2924.87 测试)

因为:空图片路径属性值,默认加载当前页面的URL作为图片路径

Safari and Chrome make a request to the actual page itself.

Internet Explorer makes a request to the directory in which the page is located.   -- 不确定这个描述的严谨性,Edge.25.10586.0 未测试出该问题~

--引用自2009年的文章,可能现在的浏览器已做了修复,只不过第一句话的描述与当前的测试结果一致。

示例:

<div style="background: url()"></div>

其中,两次请求的头文件分别为:

1、html请求

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

2、image请求

Accept:image/webp,image/*,*/*;q=0.8

另第二个请求的是HTML,但测试页面中的脚本并未正常执行,可能是:(猜测的原因~)

because it is not in a supported image format, so the rest of the response is thrown away.

其他测试: img.src=‘‘ 倒没有导致多次加载的问题。

结论:

确保页面中的图片路径设置为正确的格式。

参考:

https://bugzilla.mozilla.org/show_bug.cgi?id=473528

https://github.com/woocommerce/storefront/issues/394

http://icanhascode.com/2008/06/the-mystery-of-the-multiple-requests/

https://lifesinger.wordpress.com/2011/09/22/empty-src-is-dangerous/

https://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

https://www.w3.org/TR/css3-background/#the-background-image

时间: 2024-10-05 19:02:29

笔记-CSS空背景图片会导致页面被加载两次的相关文章

html页面元素加载顺序

一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')"></div> 写在内联的style定义里面,如: <style> #cssContainer1 { background-image: url("images/Css3.JPG"); } </style> 写在外联的css文件里. 其实这三种方法

HTML学习笔记8——CSS设置背景图片

注意点:   background:blue: 与 background-color:blue: 不一样! 一.关于background设置:   1)background:blue:   2)background-image:url(图片名称): 当背景既有颜色,又有图片时,哪个在后面哪个就生效,如下例所示: 此处写了“新宋体”的这张图片作为本文涉及到的背景图片. 以图片为背景时,若图片小于页面大小,则图片会一直重复直到铺满为止: 字在后面时,字生效 1 <!DOCTYPE html> 2

(转)HTML&amp;CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是

img只显示图片一部分 或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

CSS设置背景图片代码

CSS设置背景图片代码:设置背景图片并不难,但是有时候会忘记url的格式怎么写,之所以写这篇文章,就是让忘记者查询到,寄希望提供一定的帮助.代码如下: background-image:url(mytest/demo/small.jpg) 相关阅读:1.background属性可以参阅background属性用法详解一章节. 2.background-image可以参阅CSS的background-image属性一章节. 原文地址是:http://www.softwhy.com/forum.ph

页面第一次加载实现图片淡入方式加载

页面第一次加载实现图片淡入方式加载:图片以淡入方式加载总是让人感觉有一种动态的感觉,可以让用户体验更好,下面就简单介绍一下如何实现此效果.当页面加载的时候,让加载好的图片先隐藏,然后再使用fadeIn()函数实现图片的淡入效果,参考代码如下: <script type="text/javascript"> $("#load img").load(function() { $(this).hide(); $(this).fadeIn("5000&

yii2 如何在页面底部加载css和js

作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 正所谓命由己造,相由心生,那么我们的问题又是怎么抛出来的喃? 这个问题也算是个比较久远但是经常会有人要问到的问题.究其原因, 一来实际开发中不可避免,二来也就是刚接触yii的小伙伴喜欢揪着不放.那 为啥了解过这个问题的人就不纠结了喃?外星人:楼主你si不si撒,人家都

前端技术-HTML页面的加载

HTML页面的加载 HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输.http基于TCP建立的连接来收发数据,即实际应用上来的. 一个HTML页面的加载的交互流程大致如下: 0.输入URL1.解析URL2.构造并发送HTTP请求服务器的永久重定向响应(从 http://example.com 到 http://www.exam

HTML页面的加载

HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输.http基于TCP建立的连接来收发数据,即实际应用上来的. 一个HTML页面的加载的交互流程大致如下: 0.输入URL1.解析URL2.构造并发送HTTP请求服务器的永久重定向响应(从 http://example.com 到 http://www.example.com)浏览