HTML 实现图片的懒加载

简介: HTML 实现图片的懒加载

<!DOCTYPE html>

<html>

<head>

 <meta charset="utf-8">

 <title></title>

</head>

<body>

 <div class="box">

  <img class="lazy" src="./img/loading.gif" data-src="./img/1.png"  />

  <img class="lazy" src="./img/loading.gif" data-src="./img/1.png" />

  <img class="lazy" src="./img/loading.gif" data-src="./img/1.png" />

  <img class="lazy" src="./img/loading.gif" data-src="./img/1.png" />

  <img class="lazy" src="./img/loading.gif" data-src="./img/1.png" />

  <img class="lazy" src="./img/loading.gif" data-src="./img/1.png" />

  <img class="lazy" src="./img/loading.gif" data-src="./img/1.png" />

 </div>

</body>

</html>

<script>

window.onload = function() {

 // var imgs = document.querySelectorAll('.lazy')

 var imgs = document.querySelectorAll('img')

 function getTop(e) {

  return e.offsetTop

 }

 function lazyLoad(imgs) {

  var s = document.documentElement.scrollTop || document.body.scrollTop

  var h = window.innerHeight

  for(var i= 0;i<imgs.length;i++){

   if(s+h>getTop(imgs[i])){

    // console.log(1111)

    (function(i){

     setTimeout(function(){

      var temp = new Image

      temp.src = imgs[i].getAttribute('data-src');

      temp.onload = function() {

       imgs[i].src =imgs[i].getAttribute('data-src')

      }

     },2000)

    })(i)

   }

   // var test = getTop(imgs[i])

   // console.log('test',test)

  }  

 }

 lazyLoad(imgs)

 window.onscroll =function() {

  lazyLoad(imgs)

 }

 

}

 

</script>

<style>

.box {

 width: 200px;

 display:flex;

 flex-direction:column; // 改变主轴方向

 justify-content:center; // 定义主轴的对齐方式

}

</style>

相关文章
|
4月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
84 0
|
22天前
HTML图片
【10月更文挑战第4天】HTML图片。
19 2
|
2月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
34 5
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
45 13
|
3月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
35 0
在线将多张图片拼接起来图工具HTML源码
|
6月前
|
移动开发
uni-app使用v-html输出富文本图片溢出解决
uni-app使用v-html输出富文本图片溢出解决
617 1
|
3月前
|
前端开发 JavaScript
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
|
3月前
|
Python
Python 下载 html 中的 图片
Python 下载 html 中的 图片
29 2
|
4月前
|
数据采集 缓存 自然语言处理
PHP将HTML标签转化为图片
通过这个方法,PHP后端能够实现将HTML内容转化为图片的功能。这种方式虽然牵涉到一些额外的安装和配置,但能够相对灵活且稳定地解冀转换需求,适用于需要在后端动态生成图片的场景。
171 1
|
4月前
|
JavaScript 前端开发 CDN
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
65 0
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)