1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Html图片懒加载动画 图片懒加载的原理及实现方式

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

时间:2020-01-17 19:46:43

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。