Progressive JPEG - Web 前端 渐进(模糊)加载图片
最近在浏览 Youtube 的时候发现有张广告图片加载为模糊加载,随即 F12 也没看到相关的处理,于是想到了之前了解到的Progressive JPEG JPEGJPEG 有两种保存方式,Baseline JPEG(标准型)和 Progressive JPEG(渐进式),两种格式有相同的尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别是二者在的加载方式不同 Baseline JPEG这种储存方式是从上到下的扫描方式,把每一行顺序的保存在 JPEG 文件中,加载此文件时,数据将按照储存时的顺序从上到下一行一行的显示出来,直到所有的数据被读完,就完成了整张照片的显示,如果文件过大网速较慢的情况下那么就会看到图片被一行一行的加载。 Progressive JPEG和 Baseline 格式不同的是,Progressive JPEG文件包含多次扫描,在打开文件过程中,会显示整个图片轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式适合在网络较慢的情况就可以看到图片大概的轮廓。 图片如何保存为Progressive...
z390+英伟达1060+i7 9700 安装黑苹果教程(避坑)- MAC OS 10.13.6
前言最近在win上更新系统一直报错,快有小半年了(基本定位问题,win 的引导为空导致:msconfig)~ 哪能受这气?那就重装吧,好嘛 这一重装不要紧,之前装的双系统的 mac 引导没备份 GG 了。由于装黑苹果不仅驱动麻烦还有各种的坑,一直选择的淘宝装系统(严重谴责此类行为,身为一个搞基用户强烈建议亲自动手! ),这次被逼上梁山,得 自己装 还成了。 废话还就那个多说哈,待会开始~ 硬件支持配置的正确能大大大大减少你安装 Mac 的时间,正确配置为: 牙膏的U + 按摩的卡,这两项几乎都是免驱的。如果你很不幸是英伟达的显卡,20系的貌似不支持了,其他的最高也是 10.13.6 了 建议百度搜下 主板 + 显卡 + 黑苹果 看下有没有吃上的(还能顺便piao下 EFI) 显卡支持 EFI 准备 EFI 300~500 MB (必须) MAC OS 的镜像 (我这里是:10.13.6(17G65)) DiskGenius (分区必备) Dism++ (重建引导) etcher MAC 启动盘 硬盘建议为 GUID(GPT) 格式(以下教程皆以...
饿了么外卖红包-百亿补贴(每天都可免费领),来自内部的优惠!
最近在饿了么工作中遇到的 BD 同学教我的哦~ 在群里也咨询过这边的产品,得知有大红包的概率还是蛮大的~红包概率: 新用户可以领到 20 元大红包o 由于是员工ID的分享的,所以红包几乎都在 6~8 元左右的品质联盟红包(每天领的话概率会递增保持的,目前看最高的是10元) 因为推荐你们下单也能拿到提成,你们可以凭借下单截图、个人的用户名截图、支付宝账号发至邮箱 14971857@qq.com来领取我的返利红包啊~每单都有返利,最少一元哈(主要根据订单返利来,回复最多 T+1 )~ .wl-elm-wrap { position: relative; max-width: 525px; padding: 12px; cursor: pointer; /*filter: blur(1px);*/ border-radius: 6px; box-shadow: 3px 3px 7px 5px rgba(0, 0, 0, 0.07); /*border: 1px solid;*/ margin:...
Google AdSense 添加付款方式-使用银行外汇(招行外汇)
在谷歌中添加如何添加付款方式?最近在寻找付款方式的时候,发现了可以使用招商银行的外汇去接收谷歌广告的”工资”(拥有招商银行卡小伙伴们 的起飞~),目测是近几年办的卡片皆可以接收外汇。 申请外汇信息 这一步主要是鉴别你是否可以使用外汇~ 在招行APP中咨询客服:外汇信息;客服返回则可接收外汇,内容如下,请根据客服发给你的信息填入谷歌付款信息中。 若您已经了解相应的外管规定,接收境外汇款,可使用总行的地址来接收。 收款行信息(招商银行总行): 收款行(Beneficiary’s Bank): China Merchants Bank, H.O. Shenzhen, China SWIFT CODE:CMBCCNBS 收款人(一卡通或存折或对公账号)账号(Beneficiary’s a/c no.):************ 收款人名称(Beneficiary):***(注:境内个人以我行开户证件姓名的汉语拼音为准,境外个人以我行开户证件姓名为准;对公客户英文名称) 地址(address):深圳市深南大道7088号招商银行大厦 China Merchants Bank...
ECMAScript2021 可用新特性
是的,他又来了~ String.prototype.replaceAll String.prototype.replaceAll(searchValue, replaceValue) 看到名字是不是第一时间反应 replace 加个g不就完事了哦,那如果遇到需要转义的正则,例如 + . 这些, 或许你还会这种方案 const str = 'qqqq+qqqq+qqqq'; str.split('+').join(' '); 如上所述的确可行,也就耗点性能而已嘛~ 由于经常有这种操作,也就催生了 replaceAll 方法,更加快捷的操作字符串 const str = 'qqqq+qqqq+qqqq'; str.replaceAll('+', ' '); 还是香的啊。 Promise.any最近两个版本都有对 Promise 的Api扩充,例如 2020 的 allSettled,回顾下 const p = Promise.all([p1, p2, p3]); Promise.all (Es 2015) 只有当传入的每个 Promise 实例都返回...
客户端或服务端 cookie 的设置、读取、携带问题
将解决疑问点: 能否设置或读取子域的cookie? 客户端与服务端设置的 cookie 有什么区别? 同域或跨域如何携带 cookie 带的是谁的 cookie? 能否设置或读取子域的cookie?不行,只能向当前域或更高级的域设置 cookie 例如 client.com 不能向 a.client.com 设置 cookie,而两者相反则可以,读取亦同上。 客户端与服务端设置的 cookie 有什么区别?无论是客户端还是服务端都只能向自己的域或者更高级的域设置 cookie,例如 client.com 不能向 server.com 设置 cookie,反向同理。 服务端可以设置 httpOnly: true,且拥有该属性值时 前端无法通过 js 去获取。 客户端只会携带与请求同域的cookie,例如 client.com/getList 就带上 domain 为 client.com 的 cookie,server.com/getList 就带上 domain 为 server.com 的 cookie 默认情况下,跨域的请求不携带...
css 文字渐入效果,css 变量的进一步使用 setProperty
通过 js 修改 css 变量来更简单的实现动画效果,dom.style.setProperty 的使用 setPropertyconst a = document.querySelector('xx'); xx.style.setProperty(name, value); 顺带记一下获取的 // 该方法获取的值带 `单位` getComputedStyle(a).getPropertyValue('--x'); demo .iphoneText-wrap { margin: 100px auto; width: 400px; height: 400px; background-color: #000; overflow-y: auto; } .text { height: 300%; } .ihone-title { display: block; text-align: center; --x: 0%; position: sticky; top: 50%; transform:...
Css 模拟赛博朋克 故障风格 按钮
clip-path 和 step 的运用 记录。 .punk-wrap { display: flex; align-items: center; justify-content: center; width: 400px; height: 300px; margin: 100px auto; background-color: #F8F005; } .punk-btn, .punk-btn::after { position: relative; width: 150px; font-size: 25px; height: 40px; line-height: 40px; font-family: 'Bebas Neue', cursive; outline: none; border: none; ...
Fetch、Ajax 请求遇到301或302时
在请求中遇到301,302时浏览器会寻找 Location 并跳转,此时的 Fetch或Ajax 是处理不到这处的跳转请求。需要手动跳转的话还是协商401,前端再做拦截 // 添加响应拦截器 (Axios) instance.interceptors.response.use( (response) => { switch (response?.data?.code) { case 401: { return Promise.resolve(response); } default: break; } return Promise.resolve(response); }, );
记录前后端不同域名 携带 cookie,及如何处理 Chrome SameSite
在登陆时为了安全 后端将 cookie 种在他的域名上,也导致联调时会出现的一些问题~ 前端请求携带 cookie Axios withCredentials = true axios.create({ withCredentials: true, }); Fetch credentials = 'include' fetch("url", {method: 'POST(GET)', credentials: "include"}) 当然前端携带上 cookie 只是第一步,前提得需要后端正确的种上了 cookie,我们才可以携带 处理 Chrome SameSite 和 Secure由于 Chrome 禁止了第三方 cookie 回导致上面的后端 cookie 前端是不会携带的。 sameSite 属性 Strict (完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie。换言之,只有当前网页的 URL 与请求目标一致,才会带上 Cookie) Lax...