LazySizes用于图片延迟加载,但是不会影响SEO。LazySizes内置很多可扩展组件。可以根据图片大小、网络带宽等因素,优先加载占用资源较少的图片。
如果你想开发响应式网站,LazySizes应该是必须的工具。它可以自动计算出尺寸以便于友好的显示,有助于从内容/结构(HTML)分离,它使响应图像简单的集成到任何环境。
下载安装
npm install lazysizes --save或者
bower install lazysizes --save或者
<script src="lazysizes.min.js" async=""></script>使用示例
<!-- non-responsive: --><img data-src="image.jpg" class="lazyload" /><!-- responsive example with automatic sizes calculation: --><img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" /><!-- iframe example --><iframe frameborder="0" class="lazyload" allowfullscreen="" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"></iframe>
评论