主要是针对各种浏览器的兼容,可以支持webp的浏览器,懒加载就加载webp文件,否则加载Jpg等?
目前我们的做法是默认使用旧的图片格式,然后由客户端自行实现检测是否支持 WebP ,后将结果放到 Cookie 里面,在后端返回图片地址的时候就直接根据 Cookie 里面的值来决定是返回 WebP 还是其他旧的格式。
这样对于前端的懒加载就不用过多的修改。
可以通过手动加载一张 WebP
图片判断:
function isWebPSupported() { const img = new Image(); img.onload = function() { console.log('支持 WebP'); return true; }; img.onerror = function() { console.log('不支持 WebP 格式,加载 jpg'); return false; };}
懒加载也是一样的,在执行期间调用上面的函数判断就行了:
<img class="lazy" data-src="webp图片路径" data-src-jpg="jpg图片路径" src="可以为空,也可以放一个预览图" alt="懒加载图片" />
function lazyLoad() { const lazyImages = document.querySelectorAll('.lazy'); // 获取浏览器支持情况 const supportStatus = isWebPSupported(); lazyImages.forEach(function(img) { const rect = img.getBoundingClientRect(); if (rect.top < window.innerHeight && rect.bottom >= 0) { // 判断浏览器是否支持webp格式 if (supportStatus) { const srcWebp = img.getAttribute('data-src'); if (srcWebp) { img.src = srcWebp; img.removeAttribute('data-src'); } } else { const srcJpg = img.getAttribute('data-src-jpg'); if (srcJpg) { img.src = srcJpg; img.removeAttribute('data-src-jpg'); } } img.classList.remove('lazy'); } });}// 监听滚动事件window.addEventListener('scroll', lazyLoad);window.addEventListener('resize', lazyLoad);// 页面初次加载执行一次lazyLoad();
我们在div里放一个img,发现: 在html和html5中,div的长宽是不同的,后者的高度要超过几个像素。 比如说,下面这个是html的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
浏览器兼容 主流浏览器都兼容 HTML5 的新标签,对于 IE8 及以下版本不认识 HTML5的新元素,可以使用 JavaScript 创建一个没用的元素来解决,例如: <script> document.createElement("header"); </script> 也可以使用 shiv 来解决兼容性问题,详情可参考 HTML5 Shiv
问题内容: 我的页面宽50/50。左半部分具有六个div的行。条件: 6个正方形必须始终保持正方形。 前5个正方形应在右边留有边距/填充以进行分隔。 所有六个正方形必须保持同一行。如果我可以使它正常工作,那么我可以对较小的视口中的响应度进行必要的调整。 跨浏览器兼容最新版本的chrome和firefox。 L1 L2 L3 L4 L5 L6 问题答案: The main trick here is
本文向大家介绍JS 实现 ajax 异步浏览器兼容问题,包括了JS 实现 ajax 异步浏览器兼容问题的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了,具体代码如下所示: 以上所述是小编给大家介绍的JS 实现 ajax 异步浏览器兼容问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!
本文向大家介绍js图片上传前预览功能(兼容所有浏览器),包括了js图片上传前预览功能(兼容所有浏览器)的使用技巧和注意事项,需要的朋友参考一下 网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) 实现要点 ● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。 ● 对于 IE6~9 使用滤镜 filter:progid
本文向大家介绍JS兼容所有浏览器的DOMContentLoaded事件,包括了JS兼容所有浏览器的DOMContentLoaded事件的使用技巧和注意事项,需要的朋友参考一下 使用JavaScript操作dom元素的时候,通常会将获取dom元素的代码放在window.onload=function(){}事件处理函数中,但window.onload事件在某些开始后可能会影响客户体验,因为要等待所有