如果页面样式的背景图片路径设置为'' 或 '#', 会导致页面被重复加载两次 (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

笔记-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. SpringMVC返回Json，自定义Json中Date类型格式

    http://www.cnblogs.com/jsczljh/p/3654636.html —————————————————————————————————————————————————————— ...

  2. eclipse配置weblogic服务器

    最近项目要从tocmat迁移到weblogic,使用weblogic的原因不用多说,好处不言而喻.于是准备配置基于eclipse的weblogic服务器,并将整个过程记录下来分享给大家.       ...

  3. ParseChat应用源代码ios版

    ParseChat是一个全然原生的iPhone应用程序.用于创建实时的.基于文本的Parse聊天室.功能:支持多台设备之间的实时聊天,可动态加入新的聊天室,支持基本配置,可发送和接收音效以及随意大小的 ...

  4. 图像增强：直方图均衡和小波变换【matlab】

    直方图均衡:统计图像像素灰度的直方图分布.对其进行重新分配以使图像的直方图分布更加均衡. 小波变换:图像轮廓主要体现在低频部分,可以通过对低频分解系数进行增强处理,对高频分解系数进行衰减处理,达到图像 ...

  5. sql case when then else end sql_variant

    /****************************************************************************** ** Name: usp_cfg_Get ...

  6. 033 调整数组顺序使奇数位于偶数前面(keep it up)

    剑指offer中题目:http://ac.jobdu.com/problem.php?pid=1516 题目描写叙述: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序.使得全部的奇数位于数组的 ...

  7. 简述synchronized和java.util.concurrent.locks.Lock异同

    主要相同点:Lock能完成synchronized所实现的所有功能.主要不同点:Lock有比synchronized更精确的线程语义和更好的性能.syncronized会自动释放锁,而Lock一定要程 ...

  8. 【APIO2014】Palindromes

    #103. [APIO2014]Palindromes 统计 描述 提交 自定义测试 给你一个由小写拉丁字母组成的字符串 ss.我们定义 ss 的一个子串的存在值为这个子串在 ss 中出现的次数乘以这 ...

  9. JavaScript进阶之路 初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  10. python之MySQL学习——数据查询

    import pymysql as ps # 打开数据库连接 db = ps.connect(host='localhost', user='root', password='123456', dat ...