<html>
<head>
<meta charset="UTF-8" />
<title>WEBP TEST</title>
<script charset="utf-8" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var testWebp = function(callback){
var image = new Image();
image.onerror = function() {
callback(false);
};
image.onload = function() {
callback(image.width == 1);
};
image.src = 'data:image/webp;base64,UklGRiwAAABXRUJQVlA4ICAAAAAUAgCdASoBAAEAL/3+/3+CAB/AAAFzrNsAAP5QAAAAAA==';
},webSrc = function(src){
var suffix = src.lastIndexOf('.');
suffix = src.substr(suffix);
if (/png|jpg/.test(suffix)){
return src.substr(0,(src.length-3))+'webp';
}else{
return src;
}
}
$(function(){
var $note = $('.note');
testWebp(function(SUP){
var $img = $('img[data-img]');
if(SUP){
$('body').addClass('webp');
$img.each(function(i,o){
var $o = $(o),
src = $o.attr('data-img');
$o.attr('src',webSrc(src));
});
$note.html('你载入的是<strong>webp</strong>格式');
}else{
$('body').addClass('nowebp');
$img.each(function(i,o){
var $o = $(o),
src = $o.attr('data-img');
$o.attr('src',src);
});
$note.html('你载入的是<strong>png、jpg</strong>格式');
}
});
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px/1.6 arial,\5fae\8f6f\96c5\9ed1;color:#666;}
strong{color:#000;padding:0 2px;}
img{width:313px;height:219px;}
.img{ margin-top:20px; width:313px;height:214px; }
.webp .img{ background:url(http://demo.btorange.com/article/webp/demo2.webp) no-repeat; }
.nowebp .img{ background:url(http://demo.btorange.com/article/webp/demo2.png) no-repeat; }
</style>
</head>
<body>
<p class="note"></p>
<!-- img图片 -->
<img alt="" data-img="http://demo.btorange.com/article/webp/demo1.jpg" data-pinit="registered" />
<!-- 样式中的图片 -->
<div class="img"></div>
</body>
</html>
来源于：http://blog.csdn.net/xcysuccess3/article/details/38845625
相关推荐
文件类型包括159个PNG图片文件、60个XML配置文件、55个Java源代码文件、30个WEBP图片文件、5个JPG图片文件、3个GIT忽略文件、3个Gradle配置文件、2个Properties配置文件、1个NAME文件和1个PRO文件。该应用程序适合...
主要文件类型包括68个XML文件、46个PNG图片文件、34个Java源文件、22个Kotlin源文件、10个WEBP图片文件、5个gitignore文件、4个Gradle文件、2个Markdown文档、2个Pro文件和2个Properties文件。该项目是一个安卓应用...
本资源提供了一套基于Java的新闻资讯安卓应用设计源码，包含95个文件，其中包括36个XML配置文件，13个Java源代码文件，10个WEBP图片文件，8个Class字节码文件，6个JAR打包文件，以及4个Git忽略文件，3个Gradle构建...
文件类型包括16个XML配置文件、10个WEBP图片文件、3个GIT忽略文件、3个KTS文件、3个Java源代码文件、2个Markdown文档、2个Properties配置文件、1个名称文件、1个LICENSE文件和1个PRO项目文件。该项目是基于Android...
简介Webp图片格式是Google官方推出的一种图片格式，替代传统的jpeg格式，可以节省1/3的流量，因此在做大量使用图片的App时，可以使用多多。来来回回换了几个图片框架，都不太理想最后决定选用滑翔+ libwebp的模式...
</ul> </div> BetterScroll应用于外部wrapper容器，并且滚动部分是Vue使用canvas实现图片压缩上传 本文实例为大家分享了Vue使用canvas实现图片压缩上传的具体代码，供大家参考，具体内容如下 场景：如用户...
项目共包含73个文件，其中XML配置文件xml 21个，PNG图片文件png 17个，Java源代码文件java 11个，WebP图片文件webp 10个，Git忽略配置文件gitignore 3个，Gradle构建文件gradle 3个，Properties配置文件properties 2...
文件类型包括56个PHP源代码文件、56个PNG图片文件、33个GIF图片文件、25个JavaScript脚本文件、17个CSS样式文件、16个JPG图片文件、7个JPEG图片文件、6个WEBP图片文件和5个Markdown文档。此外，还有4个Python源代码...
文件类型包括1330个WEBP图片文件、52个JPG图片文件、33个C#源代码文件、15个CSHTML页面文件、15个PNG图片文件、12个JSON配置文件、9个CSS样式文件、8个JavaScript脚本文件、4个CSPROJ文件和1个GITATTRIBUTES文件。...
文件类型包括18个WEBP图片文件、15个Vue组件文件、7个JavaScript脚本文件、6个PNG图片文件、5个JPG图片文件、3个JSON配置文件、以及1个浏览器兼容性配置文件、1个Git忽略文件、1个Markdown文档和1个图标文件。...
本资源提供了一套基于Java的订餐系统安卓的设计源码，包含73个文件，其中包括32个XML配置文件，18个Java源代码文件，以及10个WebP图片文件。此外，还包括9个PNG图片文件，1个Git忽略文件，1个Kotlin脚本文件，1个...
java资源，应用html技术，的webp格式图片，帮助java入门者轻松掌握java开发
该GUI可以批处理文件夹或单个图片或视频，大大提高了用户使用的方便 而且运行速度不算慢，一般用户都可以下载使用 主要用于图像放大和增强画质，取代cv2.resize使得不会应放大缩小而降低画质 目前已是2.1版本 更好的...
其中Java源代码文件125个，Vue组件文件49个，PNG图片文件35个，XML配置文件20个，WebP图片文件12个，JPG图片文件8个，JavaScript源代码文件7个，CSS样式文件3个，JPEG图片文件2个，以及FreeMarker模板文件2个。...
文件类型包括22个XML配置文件、10个WEBP图片文件、5个JPG图片文件、3个GIT忽略文件、3个Gradle配置文件、3个Java源代码文件、2个Properties配置文件、1个NAME文件、1个PRO文件和1个JAR包文件。该实验项目适合用于...
图片优化管理系统，依赖于tiny对图片做优化处理，可生成webp, png与jpeg。支持自定义图片质量与尺寸，搭配CDN可根据应用需要生成各类不同的图片。
项目共包含96个文件，其中XML配置文件xml 43个，Java源代码文件java 26个，WebP图片文件webp 10个，PNG图片文件png 4个，Git忽略配置文件gitignore 3个，Kotlin脚本文件kts 3个，Properties配置文件properties 2个，...
本源码为基于Java的安卓图片分享平台设计，共包含128个文件，其中xml文件59个，java文件33个，webp图片10张，png图片7张，以及其他类型文件。该平台适用于安卓设备，提供了图片的上传、分享、浏览等功能，是一个集成...
目前移动端Android平台原生支持的图片格式主要有：JPEG、PNG、GIF、BMP、和WebP(自从Android 4.0开始支持)，但是在Android应用开发中能够使用的编解码格式只有三种：JPEG、PNG、WebP，图片格式可以通过查看Bitmap类...