img标签src=""和background-image:url();引发两次请求页面bug 具体原因是,在img 对象的src 属性是空字符串("")的时候,浏览器认为这是一个缺省值,值的内容为当前网页的路径。
浏览器会用当前路径进行再一次载入,并把其内容作为图像的二进制内 容并试图显示。
对于不同的浏览器测试后,发现对于有无src 或者src 是否为空的情况,还不尽相同,测试结果如下表。
 
代码 Firefox IE6 IE7
<img src="" /> 会重复载入 会重复载入 会重复载入
<img src /> 会重复载入 正常 正常
<img /> 正常 正常 正常
 
以后如果图片路径后来才赋值的,一定注意这个问题,不要加上src="";或者background-image:url(); 。
(IE中只有img标签有上述问题,而在chrome、firefox、safari中<script src="">和<link href="">都会导致出现一个新的请求)

img标签src=""和background-image:url();引发两次请求页面bug的更多相关文章

  1. img标签src不给路径就会出现边框————记一次二笔的编码经历

    <img/>在src加载失败或没有给的,浏览器会自动给img加上边框. 如下图这样: 产品觉得影响美观,一定要pass掉. 原码是这样: .ctn{ position: relative; ...

  2. background-image:url为空引发的两次请求问题

    参考文章: https://blog.csdn.net/jsjhushilei/article/details/51101014 1.Nicholas 在 2009 年就开始推动各浏览器厂商,现在看起 ...

  3. img标签src不给路径就会出现边框

    <img/>在src加载失败或没有给的,浏览器会自动给img加上边框. 如下图这样: 产品觉得影响美观,一定要pass掉. 原码是这样: .ctn{ position: relative; ...

  4. [android界面]android中src和background区别——前景与背景

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

  5. ImageView的src和background的区别

    参考资料: http://blog.csdn.net/dalleny/article/details/14048375 http://www.android100.org/html/201508/27 ...

  6. 【android】ImageView的src和background的区别以及两者的妙用

    一.ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸 .src是图片内 ...

  7. android于src和background差额

    ImageView中XML属性src和background的差别: background会依据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小.不会进行拉伸.src是图片内容(前 ...

  8. 【android】ImageView的src和background以及两者之间的神奇的差异

    一.ImageView中XML属性src和background的差别: background会依据ImageView组件给定的长宽进行拉伸.而src就存放的是原图的大小,不会进行拉伸.src是图片内容 ...

  9. vue动态绑定background:url绑不上的问题

    场景: 利用swipper做轮播图,在联调的时候发现有些图片存在有些图片不存在 原因:图片路径中存在 (),和 background:url() 会冲突 解决方法: 一:oss图片路径避免出现括号 ( ...

随机推荐

  1. phpcms v9 数据库操作函数

    表明默认当前load_model('xxxx')模块所在表名xxxx 若要指定表名  则:操作在mysql.class.php中$this->db->select(...) 1.查询  $ ...

  2. phpcms响应式布局导航条

  3. 关于centos的yum代理设置

    10. 有代理服务器时使用 yum默认情况下,yum 通过 HTTP 连接到网络上的仓库.所有 yum HTTP 操作都使用 HTTP/1.1,与支持这一标准的 web 代理服务器兼容.您也可以连接到 ...

  4. 谈谈我对PhoneGap的看法——(摘自唐巧的技术博客)

    源地址:http://blog.devtang.com/blog/2012/03/24/talk-about-uiwebview-and-phonegap/ 主题部分 我认为PhoneGap有以下3大 ...

  5. EditPlus开发Python的简单设置

    EditPlus是一个功能强大的编辑器,这里介绍用它来开发Python程序所需要的简单设置. 环境:win7 1.设置Python语法缩进: [1]工具-->设置用户自定义工具 [2]在分类面板 ...

  6. Class.forName()用法详解

    Class.forName()用法详解 标签: classjvmjdbc数据库documentationjava 2012-03-29 09:39 40414人阅读 评论(8) 收藏 举报  分类: ...

  7. struts2进阶篇(2)

    一.Action与MVCstruts2是一个基于MVC的web应用框架,它将应用程序分为三个组件:模型,视图,控制器.模型:包含了应用程序的业务逻辑和业务数据,由封装数据和处理业务的javaBean组 ...

  8. JS网页顶部进度条demo

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. jsonp解决CORS问题

    jsonp是个机智的解决办法: 1.本地页面写个js方法 <script> function abc(data) { alert(data.result); } </script&g ...

  10. jquery的$.extend、$.fn.extend、 jQuery.extend( target, object1, [objectN])作用及区别

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. ...