图片懒加载js实现

Pines_Cheng 发布于2019-08-23 14:09 / 2841人阅读

摘要：懒加载原理懒加载实现原理很简单通过在标签中设置一个自定义属性在元素出现在可视区域时替换默认的加载图片来达到效果实现代码定时器延迟后加载图片获取可视窗口高度获取图片离可视区域顶部的距离打印替换先加载图片避免获取的标签属性不正确

1.懒加载原理

懒加载实现原理很简单,通过在img标签中设置一个H5自定义属性,在元素出现在可视区域时,替换默认的加载图片来达到效果

2.实现代码

// 定时器,300ms延迟后加载图片
let timer = null;
let loadingImgUrl =
  "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png";
let loadingHeight = 0;
let n = 0;

function lazyload() {
  let imgs = document.getElementById("root").getElementsByTagName("img");
  // 获取可视窗口高度
  let viewHeight = document.documentElement.clientHeight;
  for (let i = 0; i < imgs.length; i++) {
    let img = imgs[i];
    // 获取图片离可视区域顶部的距离
    let top = img.getBoundingClientRect().top;
    if("false" == img.dataset.isLoaded && ((0 <= top && top <= viewHeight) || (top <= 0 && Math.abs(top) <= loadingHeight))) {
      // 打印1,2,...,9,10
      console.log(++n);
      // 替换src
      img.src = img.dataset.src;
      img.dataset.isLoaded = true;
    }
  }
}

let image = new Image();
image.src = loadingImgUrl;

// 先加载loading图片,避免获取的img标签top属性不正确
image.onload = function () {
  loadingHeight = image.height;
  lazyload();
}

window.addEventListener("scroll", function () {
  clearTimeout(timer);
  timer = setTimeout(function () {
    lazyload();
  }, 300);
})

云服务器 GPU云服务器 js实现数据的懒加载图片 js图片懒加载 js实现图片预加载 ionic js懒加载数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100183.html

图片的预加载和懒加载

摘要：图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到程序中是一种不错的选择。最近在做H5滑页时，遇到一些比较大的场景，动辄二十、三十页，而图片更是可恨的能达到上百个，所以就会导致场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片的预加载和懒加载，记个...

SwordFly 2019-08-21 10:37 评论0 收藏0
原生JS实现最简单的图片懒加载

摘要：原文地址原生实现最简单的图片懒加载欢迎。什么时候用懒加载当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设来表示图片到可视区域顶部距离并设来表示可视区域的高度。原文地址：原生JS实现最简单的图片懒加载欢迎star。如果有错误的地方欢迎指正。 Demo地址：http://axuebin.com/lazyloa...

villainhr 2019-08-21 12:01 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

appetizerio 2019-08-29 16:57 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

Shonim 2019-08-02 11:41 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

hedzr 2019-08-23 12:19 评论0 收藏0