HTML之Data URL(转)】的更多相关文章

之前写过一篇“漫谈前端优化”的文章,里面提到过DataUrl,粗鲁的描述了下,感觉不甚详焉,所以这几天也总结了这方面的知识,参考一些资料,补充一篇文章在这里,对这方面的资料来说,也是一种强化记忆应用: Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type.本文中,我将介绍如何巧妙的使用Data URL优化网站加…
Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放置在 HTML 语言之中.从 RFC 文档定稿的时间来看(1998年),它是一个很受欢迎的发明. Data URIs 定义的内容可以作为小文件被插入到其他文档之中.URI 是 uniform resource identifier 的缩写,它定义了接受内容的协议以及附带的相关内容,如果附带的相关内容…
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type.本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率. 1. Data URL基本原理 Data URL技术,图片数据以base64字符串格式嵌入到了页面中,与HTML成为一体,它的形式如下: <img src="data:imag…
声明:本文系本人按照真实经历原创.未经许可,谢绝转载. 此文百度经验版本号:怎样用Visual Studio 2010打造Data Url生成工具 源代码下载:用Visual Studio 2010编写Data Url生成工具C#源代码 相关文章:Data Url生成工具之HTML5 FileReader实现 什么是Data Url呢?Data URI scheme是在RFC2397中定义的,目的是将一些小的数据.直接嵌入到网页中,从而不用再从外部文件加载. 比如: <img src="d…
HTML5——Data Url生成 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>如何用HTML5的FileReader生成Data Url</title> <script type="text/javascript"> function imageDataUrl(source) { var file =…
基本上所有的对文件操作的API, 都迁移到的了PHP stream上, 所以, 绝大部分对文件操作的API都是支持Data URL的. 当某个API需要操作对象是文件的时候, 我们其实是可以采用Data URL让他接受一个文件内容字符串的. 比如在#62961中, 请求PHP提供一个exif_imagetypefromstring API, 因为目前的exif_imagetype API只接受文件名, 而提出者已经得到了文件内容在内存中, 不希望只能通过写到一个临时文件, 然后再调用exif_i…
在写wp之前先来了解一下Data URL是什么 Data URL 在浏览器向服务端发送请求来引用资源时,一般浏览器都有同一时间并发请求数不超过4个的限制.所以如果一个网页需要引用大量的服务端资源,就会导致网页加载缓慢的问题. 让我们先来看一下通常利用img标记请求图片资源的方式: <img src="BadBoyRED.gif"> 而Data URL会将图片资源用Base64编码,并镶嵌在html代码中.引用该图片时在客户端对编码后的图片资源进行解码即可,不需要通过请求来获…
早些时候,使用IE6浏览器,网页可以另存为mht,如果网页包含图片,那么图片也会存储到mht中. mht是微软提供的一种聚合HTML文档,它的本质其实是一个文本文件,那么我们也许会好奇,它的图片存储到那里了. 使用文本编辑器打开一个包含图片的mht文档. 这时候我们可以看到,mht的图片是使用Base64格式存储的. 于是我们可以按照mht的方式将图片存储到html中. 格式如下: <!-- ------=_NextPart_000_0000_01CA9F59.AFB45FE0 Content-…
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type.本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率. 观看演示 1. Data URL基本原理 图片在网页中的使用方法通常是下面这种利用img标记的形式: <img src="images/myimage.gif "&g…
百度经验版本号:怎样用HTML5的FileReader生成Data Url 上一篇讲了:用Visual Studio 2010编写Data Url生成工具C#版 今天用HTML5 FileReader实现了一下Data Url生成工具,上代码吧: <!DOCTYPE html <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type&…