`

发起图片请求的几种可能性(webkit内核)

 
阅读更多

图片请求的几种可能性(webkit内核)

 

网页测试源代码：

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>浏览器图片加载</title>
    <style type="text/css">
    .no_show{
        display: none;
    }
    </style>
    <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".domReady_no_show").css("display","none");

        var el = document.createElement('div');
        el.innerHTML = '<img src="http://i.mmcdn.cn/simba/img/T1MeV0FbpcXXb1upjX.jpg" />';//到这个阶段，浏览器就开始产生图片请求。
        // document.body.appendChild(el);

        new Image().src="http://img01.taobaocdn.com/tps/i1/T14Tx1FmFfXXXRAFgs-110-135.png";//到这个阶段，浏览器也产生图片请求。
    })
    </script>
</head>
<body>
<div>display:none;的图片会不会加载？会！<img class="no_show" src="http://img03.taobaocdn.com/tps/i3/T1BfxMFdNhXXcr_tT7-490-170.jpg" /></div>
<div>DOM结构预备的时候，display:none;的图片会不会加载？会！<img class="domReady_no_show" src="http://img01.taobaocdn.com/tps/i1/T1BYX3FXdfXXcr_tT7-490-170.jpg"></div>
<img nosrc="http://img04.taobaocdn.com/tps/i4/T1L005Fa4cXXXRAFgs-110-135.png" />
别忘了查看附件
</body>
</html>
复制代码

玉伯博客的讲解：

 

请在主流浏览器中打开测试页面，在Fiddler里查看http请求。

1. 隐藏图片

《img src=“1.jpg” style=“display： none” /》

测试：test_1.html

结论：只有Opera不产生请求。

注意：用visibility： hidden隐藏图片时，在Opera下也会产生请求。

2. 重复图片

《img src=“1.jpg” /》

《img src=“1.jpg” /》

测试：test_2.html

结论：所有浏览器都只产生一次请求。

3. 重复背景

《style type=“text/css”》

.test1 { background： url（1.jpg） }

.test2 { background： url（1.jpg） }

《/style》

《div class=“test1”》test1《/div》

《div class=“test2”》test2《/div》

测试：test_3.html

结论：所有浏览器都只产生一次请求。

4. 不存在的元素的背景

《style type=“text/css”》

.test1 { background： url（1.jpg） }

.test2 { background： url（2.jpg） } /* 页面中没有class为test2的元素 */

《/style》

《div class=“test1”》test1《/div》

测试：test_4.html

结论：背景仅在应用的元素在页面中存在时，才会产生请求。这对CSS框架来说，很有意义。

5. 隐藏元素的背景

《style type=“text/css”》

.test1 { background： url（1.jpg）; display： none; }

.test2 { background： url（2.jpg）; visibility： hidden; }

《/style》

《div class=“test1”》test1《/div》

测试：test_5.html

结论：Opera和Firefox对于用display： none隐藏的元素背景，不会产生HTTP请求。仅当这些元素非display： none时，才会请求背景图片。

6. 多重背景

《style type=“text/css”》

.test1 { background： url（1.jpg）; }

.test1 { background： url（2.jpg）; }

《/style》

《div class=“test1”》test1《/div》

测试：test_6.html

结论：除了基于webkit渲染引擎的Safari和Chrome，其它浏览器只会请求一张背景图。

注意：webkit引擎浏览器对背景图都请求，是因为支持CSS3中的多背景图。

7. hover的背景加载

《style type=“text/css”》

a.test1 { background： url（1.jpg）; }

a.test1:hover { background： url（2.jpg）; }

《/style》

《a href=“#” class=“test1”》test1《/a》

测试：test_7.html

结论：触发hover时，才会请求hover状态下的背景。这会造成闪烁，因此经常放在同一张背景图里通过翻转来实现。

注意：在图片no-cache的情况下，IE每次hover状态改变时，都会产生一次新请求。很糟糕。

8. JS里innerHTML中的图片

《script type=“text/javascript”》

var el = document.createElement（‘div’）;

el.innerHTML = ‘《img src=“1.jpg” /》’;

//document.body.appendChild（el）;

《/script》

测试：test_8.html

结论：只有Opera不会马上请求图片。

注意：当添加到DOM树上时，Opera才会发送请求。

9. 图片预加载

最常用的是JS方案：

《script type=“text/javascript”》

new Image（）.src = ‘1.jpg’;

new Image（）.src = ‘2.jpg’;

《/script》

在无JS支持的环境下，可以采用隐藏元素来预加载：

《img src=“1.jpg” style=“visibility： hidden; height： 0; width： 0” /》

测试：test_9.html

终于到总结了

对于隐藏图片和隐藏元素的背景，Opera不会产生请求。

对于隐藏元素的背景，Firefox也不会产生请求。

对于尚未插入DOM树的img元素，Opera不会产生请求。

基于webkit引擎的Safari和Chrome，支持多背景图。

其它情景，所有主流浏览器保持一致。

对图片请求的处理上，个人觉得Opera走在前列。

番外

1. 用Fiddler监控Opera时，如果是本地服务器，需要在Opera的代理服务器设置里，将本地服务器勾选上。

2. 查看HTTP请求数，还有一个万无一失的方法是，直接查看Apache的access.log文件。

3. 我的Firefox对于重复图片和重复背景，会产生重复请求。禁用了所有扩展，问题依旧。有知详情者，还望告知。（ lifesinger）

//---------------------------2014/1/17

如果你在html里面已经加载了图片，再修改img的src，浏览器不会产生请求。

 

 

 

原网址：https://www.cnblogs.com/samwu/archive/2013/08/04/3236428.html

分享到：
| CSS里常见的块级元素和行内元素
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    duilib webkit内核浏览器控件

    duilib webkit内核浏览器控件，基于BlaFans的wke内核 duilib webkit内核浏览器控件，基于BlaFans的wke内核 duilib webkit内核浏览器控件，基于BlaFans的wke内核

    WebKit内核源代

    在“WebKit内核源代码分析”系列文档中，我们可以期待学习到以下几个核心知识点： 1. **解析与解析器**：WebKit如何将HTML和CSS文本转换为内部数据结构，这是理解和优化页面加载速度的基础。文档可能会详细介绍...

    webkit内核浏览器.rar

    WebKit 内核是苹果2005年先开发并提出开源的，后面 Google 也以此为基础，并独立开发出 Chromium 的，2008年 Google 为 WebKit 为内核创建了一个新项目 chormium ，后来 Google 的 chrom 占领了浏览器的大部分市场。

    易语言调webkit内核多页面浏览器

    转webkit内核多页面浏览器，自动填表功能还没实现！请大家测试修改

    duilib webkit内核浏览器控件（修复select标签bug）

    然而，原版的WebKit内核可能存在一些问题，如“select标签的bug”，这可能指的是在某些情况下，元素在显示或交互时可能遇到错误，导致用户体验不佳。此外，“无法隐藏控件的bug”可能是指在尝试通过编程方式隐藏...

    VB webkit内核 利用控件操作网页内元素

    在VB（Visual Basic）中，我们可以通过利用Webkit内核的控件来实现对网页内容的操作，从而创建出能够与网页交互的桌面应用程序。本篇文章将深入探讨如何在VB中使用Webkit内核以及如何控制网页内的元素。 首先，要...

    duilib webkit内核浏览器控件 duilib webkit内核浏览器控件，基于BlaFans的wke内核

    Duilib WebKit内核浏览器控件是用于Windows平台上的一个用户界面库，它提供了一种高效、便捷的方式来集成WebKit内核，实现具有现代Web浏览功能的桌面应用程序。这个控件基于BlaFans的Wke内核，Wke是一个轻量级、高...

    android webkit 内核

    Android上的WebKit内核则专门针对移动设备进行了优化，以适应小屏幕显示和触摸操作。 **二、Android WebKit架构** Android WebKit由以下几个主要部分组成： 1. **WebView组件**：这是Android应用程序可以直接使用...

    webkit内核源代码分析

    webkit开发学习笔记(全面)_第一版 webkit内核源代码分析(1)

    c# webkit 内核浏览器简例

    同时，由于WebKit内核的广泛使用，大部分网页在WebKit中运行良好，减少了兼容性问题。 **6. 文件“MyWebBrowser”** 在提供的压缩包中，"MyWebBrowser"可能是项目源代码的名称。这个项目可能包含了主程序文件、...

    C#WinFrom窗体集成Webkit内核 webkit.net包+教程+源码 全包

    C#WinFrom窗体集成Webkit内核 webkit.net包+教程+源码 全包

    Webkit内核，含导入WebKit.Interop.dll

    Webkit内核是一种开源的网页渲染引擎，广泛用于各种浏览器和操作系统中，如Apple的Safari和Google的Chrome早期版本。这个内核负责解析HTML、CSS、JavaScript等Web标准，呈现网页内容，并处理用户交互。在.NET环境中...

    WebKit内核源代码分析(三)

    ### WebKit内核源代码分析（三）：Android中的WebKit介绍 #### 一、WebKit概述与URL处理 本文档深入探讨了WebKit在Android环境下的实现原理，并特别关注了WebKit如何处理URL请求及其相关的CSS样式应用等内容。...

    Webkit内核的浏览器默认CSS属性

    ### Webkit内核浏览器默认CSS属性详解 #### 引言 在前端开发中，了解不同浏览器内核的默认样式设置对于实现跨浏览器兼容性至关重要。WebKit作为一款流行的浏览器引擎，被广泛应用于Safari、Google Chrome等浏览器...

    Android_WebView、Webkit内核深入讲解

    Android WebView 是 Android 平台上的一种基于 WebKit 内核的浏览器控件，可以用来在移动应用程序中显示网页内容。WebKit 是一个开源的浏览器网页排版引擎，包含 WebCore 排版引擎和 JSCore 引擎。下面是 Android ...

    webKit等内核实现的webBrowser

    总结来说，选择WebKit等非IE内核的Web浏览器，可以享受到更快的页面加载速度、更丰富的Web功能以及更好的安全性和兼容性。这些内核不断演进，推动着Web技术的发展，为用户提供更加优质的浏览体验。

    webkit内核浏览器

    1. 这是一个基于webkit内核的浏览器。它只有简单的功能，直接调用一个html文件。 2. 使用windown sdk封装的webkit浏览器。 3. demo出自 http://blog.csdn.net/x931100537/article/details/39320149 此demo直接调用...

    webkit内核wke.dll的易语言调用例程

    总结来说，易语言调用webkit内核的wke.dll需要对易语言的EPL机制有深入了解，同时还需要处理C++库的特性和可能的版本限制。虽然过程可能相对复杂，但一旦成功，就能在易语言环境中实现强大的网页浏览和处理功能。

    Webkit内核duilib控件

    总的来说，"Webkit内核的Duilib控件"为开发者提供了一种新的、富有表现力的方式来设计和构建桌面应用。通过掌握Webkit和Duilib的相关知识，你可以创建出具有高度交互性和现代感的用户界面，同时享受到Web技术带来的...

    webkit 内核介绍文档入门

    【Webkit内核探究】Webkit是开源的Web浏览器引擎，它的应用广泛，包括Apple的Safari、Google的Chrome、Nokia S60平台的默认浏览器以及Apple和Android手机的默认浏览器。作为三大主流浏览器内核之一，Webkit与Gecko...

Magicbox
Global site tag (gtag.js) - Google Analytics