使IE浏览器支持webp格式图片显示

webp是一种图像压缩格式，由谷歌推出，开源免费。webp格式图片具有很多优势，相比于传统的png、jpg等在同等图像质量下面，它的图像占有空间更少，因此，可以广泛用于各种对存储空间要求较高的场景中，尤其是web方面。webp支持多种浏览器，例如360、chrome、火狐等，但是，对于IE浏览器它不能直接支持，需要采用一些第三方js插件进行渲染。

本教程针对这个问题进行解决。

完整的资源代码链接：https://download.csdn.net/download/qianbin3200896/12712293

整个解码过程需要依赖两个js插件：polyfills.js和webp-hero.boundle.js。新建index.html，脚本内容如下：

<!doctype html>
<html><head><meta charset="utf-8"/><title>webp解码测试</title><script src="./polyfills.js"></script><script src="./webp-hero.bundle.js"></script></head><body><h1>webp解码测试</h1><img alt="" src="test.webp"/><script>// for this demo, you can add "?force" to the url to force webp conversionvar webpSupport = location.search.indexOf("force") !== -1? Promise.resolve(false): undefined// instance the webp machinevar webpMachine = new webpHero.WebpMachine({webpSupport: webpSupport})// polyfill this entire document's webp imageswebpMachine.polyfillDocument()</script></body>
</html>

这个时候使用Microsoft Edge等浏览器本地打开该html页面，效果如下：

但是如果此时用IE浏览器打开，会发现图片加载不出来。这个问题是因为上述两个js插件比较特殊，只能在服务器部署环境下才能正常使用，直接本地加载会出问题。那么为了验证这个问题，我利用django2简单建设了一个站点，index.html内容如下：

{% load staticfiles %}
<!doctype html>
<html><head><meta charset="utf-8"/><title>webp解码测试</title><script src="{% static 'polyfills.js' %}"></script><script src="{% static 'webp-hero.bundle.js' %}"></script></head><body><h1>webp解码测试</h1><img alt="" src="{% static 'test.webp' %}"/><script>// for this demo, you can add "?force" to the url to force webp conversionvar webpSupport = location.search.indexOf("force") !== -1? Promise.resolve(false): undefined// instance the webp machinevar webpMachine = new webpHero.WebpMachine({webpSupport: webpSupport})// polyfill this entire document's webp imageswebpMachine.polyfillDocument()</script></body>
</html>

然后开启服务器，此时再用ie浏览器（ie11）打开，效果就正常了：

如果熟悉django的读者可以下载完代码后直接运行，查看效果。如果使用java开发web的读者，则需要自行创建一个服务就可以了。

使IE浏览器支持webp格式图片显示相关推荐

浏览器如何判断是否支持 webp 格式图片
(1)宽高判断法.通过创建image对象,将其src属性设置为webp格式的图片,然后在onload事件中获取图片的宽高,如果能够获取,则说明浏览器支持webp格式图片.如果不能获取或者触发了one ...
浏览器是否支持webP格式图片
浏览器是否支持webP格式图片关于更多日常使用的公共类的操作方法,可以关注下小滑轮网站 webP格式 webp格式的图片在质量相同的情况下,可以拥有更小的体积.而且现在很多资源存储的云服务商都支持请 ...
webp图片在html上显示,WebP 格式图片在实际项目中的使用方式
一.前言关于 WebP 的支持情况,以及适用场景此处不做详细说明,具体见官方文档. 先说结论,目前 WebP 支持情况占比较大(数据如下),在适合的场景下可以使用 WebP 格式图片来提高页面加载速 ...
解决 .webp 格式图片在 ios 设备上无法正常显示的问题
解决.webp 格式图片在 ios 设备上无法正常显示的问题使用字符串的 replace() 方法,将 webp 的后缀名替换为 jpg 的后缀名 // 定义请求商品详情数据的方法 async ge ...
通过浏览器，将webp格式图片转jpg格式
概述我们网络上下载的图片,很多的是webp格式的图片,而目前支持这种图片格式的软件较少,比如Windows 照片查看器,是不能直接打开图片的.安装其他专业图像软件又麻烦. 因此,本文介绍利用电脑常用 ...
怎么将webp格式图片转换成jpg？三招快速完成！
怎么将webp格式图片转换成jpg?WebP是一种新型的图像格式,但目前并不被所有的浏览器和设备所支持.相比之下,JPG格式得到广泛支持,因此将WebP格式的图片转换为JPG格式可以确保图片在更多设备 ...
Webp格式图片怎么转JPG？教你几种简单好用的转换方法
Wepb格式的图片怎么转换成JPG格式呢?WebP是一种新型的图像格式,但是它目前仍然不被所有的浏览器和设备支持.大多数设备和浏览器都支持JPG格式,因此将WebP格式的图片转换成JPG格式可以确保图 ...
web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）
https://www.bilibili.com/video/BV14J4114768?p=390 代码:https://gitee.com/xiaoqiang001/html_css_materia ...
android webview webp,iOS WebView中使用webp格式图片的方法
webp格式图片 webp格式图片是google推出的,相比jpg png有着巨大的优势,同样质量的图片webp格式的图片占用空间更小,在像电商这样图片比较多的App中,使用webp格式图片会很有优势 ...

使IE浏览器支持webp格式图片显示

使IE浏览器支持webp格式图片显示相关推荐

最新文章

热门文章