webp图片应用

最新推荐文章于 2024-05-30 11:27:58 发布

iteye_10110

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量98

点赞数

分类专栏： HTML web HTML5 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_10110/article/details/82637307

版权

HTML 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

web

4 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

<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

iteye_10110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webp图片应用

&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8" /&gt;&lt;title&gt;WEBP TEST&lt;/title&gt;&lt;script charset="utf-8" type="text/javascript" src="http://ajax.googleapis.
复制链接

扫一扫