[HTML5] Lazyload below the fold images and iframes with native browser lazy-loading
In this lesson, you'll learn how to use the loading="lazy" attribute available on images and iframes to lazily load below the fold images, which saves bandwidth and increases the load time performance of web pages. You'll also learn how to prevent images from lazy loading if necessary, and how to add lazy loading to responsive images as well. Lazy loading is supported in Chrome 76, and will be available in the next version of Edge and has public signals of support from Firefox, and Safari as well.
<!DOCTYPE html>
<style>
img {
border: 1px solid black;
display: block;
width: 400px;
height: 1000px;
}
</style>
<img loading="lazy" src="https://via.placeholder.com/400x1000"/>
<img loading="lazy" src="https://via.placeholder.com/400x1001"/>
<img loading="lazy" src="https://via.placeholder.com/400x1002"/>
<img loading="lazy" src="https://via.placeholder.com/400x1003"/>
<picture>
<source media="(min-width: 100px)" srcset="https://via.placeholder.com/1200x3000">
<img loading="lazy" src="https://via.placeholder.com/400x1004"/>
</picture>
<img loading="lazy"
srcset="https://via.placeholder.com/400x1005 400w, https://via.placeholder.com/800x2010 800w"/>
<iframe loading="lazy" src="http://example.com" width="400" height="400"></iframe>
[HTML5] Lazyload below the fold images and iframes with native browser lazy-loading的更多相关文章
- jQuery.lazyload使用及源码分析
前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实 ...
- LazyLoad.js及scrollLoading.js
http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加 ...
- JQuery LazyLoad实现图片延迟加载-探究
对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...
- JS怎样实现图片的懒加载以及jquery.lazyload.js的使用
在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...
- 前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...
- [转]LazyLoad.js及scrollLoading.js
本文转自:http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动 ...
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载
jquery.scrollLoading方法 html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
- 图片懒加载jquery lazyload
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...
随机推荐
- 图数据库neo4j添加算法包
1. 从https://github.com/neo4j-contrib/neo4j-graph-algorithms/releases下载相应版本jar包,放到 C:\Users\Administr ...
- （十四）JDBC入门
目录 什么是JDBC 操作JDBC的步骤 DriverManager对象 数据库URL Connection对象 Statement对象 ResultSet对象 常用数据类型转换表 释放资源 SQL注 ...
- sessionId详解
sessionid是一个会话的key,浏览器第一次访问服务器会在服务器端生成一个session,有一个sessionid和它对应.服务端在创建了Session的同时,会为该Session生成唯一的se ...
- 上传文件-layui+ashx
public void ProcessRequest (HttpContext context) { if (true) { context.Response.ContentType = " ...
- MySql外网不能访问设置
mysql的root账户,我在连接时通常用的是localhost或127.0.0.1,公司的测试服务器上的mysql也是localhost所以我想访问无法访问,测试暂停. 解决方法如下: 1,修改表, ...
- 巧用flex（一）
在开发中我们经常遇到一个页面头部内容固定顶部,中间内容可滚动的需求,一般的逻辑就是把头部内容通过position以及z-index固定位置,提高层级,然后中间内容设置距离顶部一定距离,这样的效果是侧边 ...
- CVE-2019-0213: Apache Archiva Stored XSS
CVE-2019-0213: Apache Archiva Stored XSS Severity: Low Vendor:The Apache Software Foundation Version ...
- 有选择性的启用SAP UI5调试版本的源代码
在低版本的SAP UI5应用中,我们一旦切换成调试模式,那么应用程序源代码和UI5框架程序的源代码的调试版本都会重新加载,耗时很长. 我最近发现UI5新版本1.66.1提供了选择性加载调试版本的源代码 ...
- php使用播放插件播放m3u8,mp4,flv格式的视频
一.这里我主要是播放m3u8的视频,有两款比较好的插件,swise和ckpalyer,我介绍的是ckplayer,这是在pc端播放的,并且是需要flash支持的,不过现在的最新浏览器都是默认安装的 二 ...
- Image Processing and Analysis_15_Image Registration：Mutual-Information-Based Registration of Medical Survey——2003
此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...