现在的网站越来越花哨, 图片加载越来越多, 这样加载速度就会越来越慢了, 因此, 图片懒加载就很流行咯~
1. 把
img
标签中的src
属性删掉, 此时, 添加属性 data_src, 把图片链接放在该属性下2. 通过使用
img
标签添加背景图片, 充当懒加载前的显示图片3. 当该
img
标签在浏览器显示区内时, 通过js
实现把img
标签 中的data_src
的链接赋值到img
标签中的src
属性
注: 浏览器显示区如何判断
JS code
// 页面懒加载 function loadlazy(){ var itv = setTimeout(function(){ var winHeight = $(window).height(); var scrolltop = $(window).scrollTop(); $('.lazyload-img').each(function(){ var oTop = $(this).offset().top; if((oTop-scrolltop) >= 0 && (oTop-scrolltop)<winHeight){ var src = $(this).attr("data_src"); $(this).attr("src",src); } }) },100); } // 页面滚动加载 $(window).scroll(function(){ loadlazy(); } // 页面加载完成 $(function() { loadlazy();
HTML图片懒加载
最新推荐文章于 2024-09-11 14:16:25 发布