50元求份JS判断代码

[复制链接]
查看: 4314   回复: 9
发表于 2023-7-23 13:55:56 | 显示全部楼层 |阅读模式
需要一段JS代码判断浏览器是否支持显示webp,如果支持就加载外部1.js否则加载2.js
回复

使用道具 举报

发表于 2023-7-23 13:56:05 | 显示全部楼层
  1. function WebpIsSupported(callback){    // If the browser doesn't has the method createImageBitmap, you can't display webp format    if(!window.createImageBitmap){        callback(false);        return;    }    // Base64 representation of a white point image    var webpdata = 'data:image/webp;base64, UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';    // Retrieve the Image in Blob Format    fetch(webpdata).then(function(response){        return response.blob();    }).then(function(blob){        // If the createImageBitmap method succeeds, return true, otherwise false        createImageBitmap(blob).then(function(){            callback(true);        }, function(){            callback(false);        });    });}WebpIsSupported(function(isSupported){    if(isSupported){        console.log("支持");    }else{        console.log("不支持");    }});
复制代码

把console.log("支持");或  console.log("不支持"); 改成输出你的JS就行了
回复 支持 反对

使用道具 举报

发表于 2023-7-23 13:56:39 | 显示全部楼层
https://blog.csdn.net/weixin_33695450/article/details/89626831

然后自个改改代码就行
回复 支持 反对

使用道具 举报

发表于 2023-7-23 13:56:44 | 显示全部楼层
var isSupportWebp = function () {
  try {
    return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;
  } catch(err) {
    return false;
  }
}

isSupportWebp()







function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}






const supportsWebp = ({ createImageBitmap, Image }) => {
  if (!createImageBitmap || !Image) return Promise.resolve(false);

  return new Promise(resolve => {
      const image = new Image();
      image.onload = () => {
          createImageBitmap(image)
              .then(() => {
                  resolve(true);
              })
              .catch(() => {
                  resolve(false);
              });
      };
      image.onerror = () => {
          resolve(false);
      };
      image.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
  });
};

const webpIsSupported = () => {
  let memo = null;
  return () => {
      if (!memo) {
          memo = supportsWebp(window);
      }
      return memo;
  };
};

webpIsSupported()().then(res => {
    console.log("是否支持 webp", res)
}).catch(err => {
    console.log(err)
})
回复 支持 反对

使用道具 举报

发表于 2023-7-23 13:57:33 | 显示全部楼层
一搜一堆,5毛钱流量就够
回复 支持 反对

使用道具 举报

发表于 2023-7-23 13:57:49 | 显示全部楼层
妈的我眼瞎了,谢谢老哥我试试,可以了我私你。
回复 支持 反对

使用道具 举报

发表于 2023-7-23 13:58:46 | 显示全部楼层
改改  这种还要花钱吗  百度阿铁铁
回复 支持 反对

使用道具 举报

发表于 2023-7-23 13:59:14 | 显示全部楼层
https://cl1p.net/jsin
很简单的解决方法
stackoverflow找的
回复 支持 反对

使用道具 举报

发表于 2023-7-23 13:59:40 | 显示全部楼层
直接填js地址不行啊
回复 支持 反对

使用道具 举报

发表于 2023-7-23 14:00:38 | 显示全部楼层
https://zhidao.baidu.com/question/718506054538000445.html
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则