图片懒加载

来源：互联网发布：win10设置网络编辑：程序博客网时间：2024/05/18 01:20

在你的网站有很多张图片的时候，如果打开把所有图片全都加载完毕在呈现页面的话，如果用户网速慢，则打开页面的时间会非常长，影响体验。

下面推荐大家一个图片懒加载的方法，在用户打开网页的时候只会加载用户能看到的图片，当用户拉到需要看的图片的位置，那个图片才会加载出来，极大地提高了速度和体验。

首先需要引入 lazysizes.min.js

在需要懒加载的图片上面加上class="lazyload" 图片是src地址则要改为data-src 例如：

只要跟所需要的图片加上这两个属性，这个图片就可以懒加载了

但是加载速度过快肉眼估计看不到效果，想看效果可以按F12，点Network 在你拉倒即将看到下面的图片时，会发现下面的图片才开始加载

看到上面的图则证明懒加载功能实现了

完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title><script type="text/javascript" src="lazysizes.min.js"></script>

</head>

<body>

<div style="height:1000px;">中间留白去这样才能触发懒加载，但是加载速度过快肉眼估计看不到效果，想看效果可以按F12，点Network 在你拉倒即将看到下面的图片时，会发现下面的图片才开始加载.</div>

</div>

</body>

</html>

转载自爱哭网lovecry.wang 原文链接:http://lovecry.wang/Original/details?random=a603aabd-0c42-4c04-9078-ff14d356271f

阅读全文

1 1