Html图片懒加载动画,图片懒加载的原理及实现方式

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

为什么需要图片懒加载？

正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载img标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量。

解决方式

当网站需要大量图片(流量消耗很大)，“按需加载”。即用户滚动页面时才加载图片。当网速非常快的时候，用户并不能感知懒加载的动作，既省流量又不影响用户浏览。

图片懒加载的原理

把img标签上的src属性设置为空或者其它占位图，把图片真正的URL放在另一个属性data-src中，在需要的时候也就是图片进入可视区域的之前，将URL取出放到src中。

对img标签来说，alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。 data-* 全局属性：构成一类名称为自定义数据属性的属性，可以通过HTMLElement.dataset来访问。

jQuery.lazyload 图片延迟加载插件实现图片懒加载1

实现原理：页面显示的图片是一个gif加载动画。当页面滚动时，如果图片出现在屏幕中，就利用jQuery把img的src属性替换为data-src的内容，浏览器就会实时加载。

jQuery 代码如下：1

2

3

4

5

6

7

8

9

10

11

$(() {

$("img.lazy").lazyload();

});

jquery.lazyload.js