function hasWebp () {
// 查看Cookie,如果没有则进行以下逻辑
var img = new Image();
img.onload = handleSupport;
img.onerror = handleNotSupport;
img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAsAAAABBxAREYiI/gcAAABWUDggGAAAADABAJ0BKgEAAQABABwlpAADcAD+/gbQAA==';
// 否则根据Cookie执行handleSupport或者handleNotSupport
}
function handleSupport() {
setCookie('swebp', 'true', 2592000); // 30天过期
}
function handleNotSupport () {
setCookie('swebp', 'false', 2592000);
}

  

下面是 localStorage版本

function detectWebp () {
if (!window.localStorage || typeof localStorage !== 'object') return; var name = 'webpa'; // webp available
if (!localStorage.getItem(name) || (localStorage.getItem(name) !== 'available' && localStorage.getItem(name) !== 'disable')) { var img = document.createElement('img'); img.onload = function () {
try {
localStorage.setItem(name, 'available');
} catch (ex) {
}
}; img.onerror = function () {
try {
localStorage.setItem(name, 'disable');
} catch (ex) {
}
};
img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAsAAAABBxAREYiI/gcAAABWUDggGAAAADABAJ0BKgEAAQABABwlpAADcAD+/gbQAA==';
}
}

  

webp实践的javascript检测方案的更多相关文章

  1. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  2. JavaScript检测之basevalidate.js

    上篇文章「JavaScript检测原始值.引用值.属性」中涉及了大量有用的代码范例,为了让大家更方便的使用这些代码,博主特意把这些代码重新整理并托管到 GitHub,项目地址是:https://git ...

  3. javascript检测当前浏览器是否为微信浏览器

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. 如何用Javascript检测到所有的IE版本

    如何用Javascript检测到所有的IE版本 function GetIEVersion() { var sAgent = window.navigator.userAgent; var Idx = ...

  5. JavaScript检测数据类型

    JavaScript检测数据类型 标签(空格分隔): JavaScript function valType(value) { return Object.prototype.toString.cal ...

  6. 用 JavaScript 检测浏览器在线/离线状态(JavaScript API — navigator.onLine)

    如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见. 无论浏览器是否在线,navigator.onLine 属 ...

  7. Linux入侵痕迹检测方案【华为云技术分享】

    背景说明 扫描是一切入侵的基础,通过扫描来发现目标主机是否为活动主机.操作系统是什么版本.开放了哪些服务等.扫描技术纷繁复杂,新的扫描技术也层出不穷,不可能穷举所有扫描技术,下面按入侵步骤对主机扫描. ...

  8. 文件上传——客户端检测绕过(JavaScript检测)(一)

    前言 通常再一个web程序中,一般会存在登陆注册功能,登陆后一般会有上传头像等功能,如果上传验证不严格就可能造成攻击者直接上传木马,进而控制整个web业务控制权.下面通过实例,如果程序只进行了客户端J ...

  9. LCD显示器缺陷自动化检测方案

    很牛的测试 参考: 1.https://www.radiantvisionsystems.com/ 2.https://www.radiantvisionsystems.com/node/275 LC ...

随机推荐

  1. 假设检验,alpha,p值 通俗易懂的的理解。

    假设检验: 一般原假设H0 :表是为 XXX和YYYY无显著差异,H1,是有显著差异. 如果我们定义alpha的值是0.05.意味着我们接受H0是真的但是我们却认为他是假的的概率. 这里你想想,这个值 ...

  2. python3【基础】-赋值与深浅拷贝

    一.Python的变量及其存储 在高级语言中,变量是对内存及其地址的抽象.对于python而言,python的一切变量都是对象,变量的存储,采用了引用语义的方式,存储的只是一个变量的值所在的内存地址, ...

  3. PAT甲题题解-1029. Median (25)-求两序列的中位数,题目更新了之后不水了

    这个是原先AC的代码,但是目前最后一个样例会超内存,也就是开不了两个数组来保存两个序列了,意味着我们只能开一个数组来存,这就需要利用到两个数组都有序的性质了. #include <iostrea ...

  4. #个人博客作业Week1——浏览教材后提出的5个问题

    1.对于MSF的团队模型,请问是团队中的哪个角色监督9项原则的实现?是否会浪费时间和精力在践行9项原则上?2.在调查用户需求和用户体验时如何让不同阶层的用户更多的参与度?3.想成为一位优秀的PM需要从 ...

  5. Linux内核分析第一二章读书笔记

    linux读书笔记(1,2章) 标签(空格分隔): 20135328陈都 第一章 Linux内核简介 Unix的历史 Unix 虽然已经使用了40年,但计算机科学家仍然认为它是现存操作系统中最强大和最 ...

  6. python 图像处理(从安装Pillow开始)

    python2.x及以下用的是PIL(图像处理库是 PIL(Python Image Library)),最新版本是 1.1.7  可在http://www.pythonware.com/produc ...

  7. NServiceBus官方文档翻译(二)NServiceBus 入门

    在这篇教程中我们将学习如何创建一个非常简单的由客户端向服务端发送消息的订单系统.该系统包括三个项目:Client.Server 和 Messages,我们将按照以下步骤来完成这个任务. 创建 Clie ...

  8. ping出现dup问题

    华为交换机收到mac地址漂移告警:  Dec 24 2018 16:48:22+08:00 HW5320 %%01SECE/4/UCSUPPRESSRESUME(l) [66]:MAC address ...

  9. MySQL查询优化:LIMIT 1避免全表扫描

    在某些情况下,如果明知道查询结果只有一个,SQL语句中使用LIMIT 1会提高查询效率. 例如下面的用户表(主键id,邮箱,密码): create table t_user(id int primar ...

  10. java工程师需要学什么

    成为一名Java高级工程师你需要学什么 宏观上: 1.技术广度方面至少要精通多门开源技术吧,研究过struts\spring等的源码. 2.项目经验方面从头到尾跟过几个大项目,头是指需求阶段,包括需求 ...