如果页面样式的背景图片路径设置为'' 或 '#', 会导致页面被重复加载两次 (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年的文章，可能现在的浏览器已做了修复，只不过第一句话的描述与当前的测试结果一致。

示例：

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

其中，两次请求的头文件分别为：

1、html请求

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

2、image请求

  1. 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

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

  1. url取值乱码问题，url加中文导致页面不能加载问题 js unicode转码，以及解码

    很多时候写H5或其他适配时,打不开url.很多原因是因为浏览器不支持中文url,从url拿 出来的中文值也会乱码,这时候就必须把中文转化成Unicode值,去进行页面传值 中文转Unicode fun ...

  2. uploadify多次加载导致页面无法加载

    function upld() { $('#file_upload').uploadify({ 'formData' : {'seccode':'<?php echo get_cookie('a ...

  3. echarts一个页面动态加载两张不同图表数据

    参考 http://www.stepday.com/topic/?877 http://blog.csdn.net/for_china2012/article/details/45167161 // ...

  4. html页面元素加载顺序

    一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...

  5. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

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

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

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

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

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

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  9. CSS中背景图片的background-position中的left top到底是相对于谁的？

    在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...

随机推荐

  1. 安装第三方模块时遇到Python version 2.7 required, which was not found

    ## script to register Python 2.0 or later for use with win32all# and other extensions that require P ...

  2. 日期控件ie9失效

    WdatePicker.js在在IE 6,7,8下面多可以,就是在IE9里面无法打开. 解决方案: 方法一: $crossFrame:true做出修改.true改为false 方法二: <met ...

  3. highCharts+Struts2生成柱状图

    这篇文章主要结合Struts2+json+Highcharts实现动态数据的显示.为了节省时间,就不写数据库了.在action中用一个集合来模拟从数据库取到的数据.模拟数据为三个学生在不同时间成绩的变 ...

  4. 在Intellij IDEA下用X-debug调试PHP

    用Intellij IDEA使用X-debug来调试PHP,主要需要配置的部分有三个地方,分别为php.ini的配置,IDEA的配置和浏览器的配置,主要如下: php.ini(wamp修改的是phpF ...

  5. 首次接触XAMPP，端口被占用困恼

    本人运气比较好,首次安装XAMPP就碰到了各种问题啊!并且已经解决,以下是我问题的出处并且解决. 问题描述: apache无法打开,并且连带的出现了mySql无法打开.(即80端口冲突问题) 解决办法 ...

  6. 带圈星号用MathType可以编辑出来吗

    对于很多的数学领域的人来说,大家都知道数学符号往往并不是单一的,常常会出现在不同的场景下有不同的符号要求.比如带星号的运算符号,加减乘除等.对于乘号来说,有点乘叉乘和星乘三种,下面本MathType教 ...

  7. Lumen 队列

    队列 简介 连接 Vs. 队列 驱动的必要设置 创建任务类 生成任务类 任务类结构 分发任务 延迟分发 任务链 自定义队列 & 连接 指定任务最大尝试次数 / 超时值 频率限制 错误处理 运行 ...

  8. fnt 图字原理

    摘自:http://blog.csdn.net/wzq9706/article/details/8188256 首先要介绍一下,图字是怎么来的?其实这个很早很早了,记得80后在95年开始玩DOS下的仙 ...

  9. Visual Studio 2010 如何改用 Beyond Compare 作为 TFS 的比较工具

    Beyond Compare 是一套非常实用的文件及文件夹比较软件,不仅可以快速比较出两个文件夹的不同之处,还可以详细的比较文件之间的内容差异.最近改用 TFS 进行版本控管之后,说实在的还是习惯使用 ...

  10. The Thinking of AutomaticTest（有关自动化测试的思考）

    考虑因素: 容易维护 简洁易懂 代码重用性好 系统的稳定性强 UI自动化:   数据的获取:装载的数据文件类型.数据的形式.数据的解析方法定义. 1.利用Junit单元测试组织用例,明确输入数据.预期 ...