码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-02-12 15:56:46      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:文件   des   can   life   throw   执行   url   org   cep   

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

标签:文件   des   can   life   throw   执行   url   org   cep   

原文地址:http://www.cnblogs.com/elevenmox/p/6390949.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!