图片懒加载

最新推荐文章于 2024-06-05 20:15:58 发布

laumlin

最新推荐文章于 2024-06-05 20:15:58 发布

阅读量119

点赞数

分类专栏： html css 文章标签：图片懒加载节流函数

本文链接：https://blog.csdn.net/weixin_39147099/article/details/83789616

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

图片懒加载的demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片懒加载</title>
  <style>
  ul {
    list-style-type: none;
  }
  li {
    margin: 100px 0;
    height: 800px;
    overflow: hidden;
  }
  </style>
</head>
	<body>
	  <div>
	    <ul>
		    <li><a href=""><img data-src="http://t1.mmonly.cc/uploads/tu/zyf/tt/20160520/kewnk2ermbe.jpg"></a></li>
		    <li><a href=""><img data-src="http://t1.mmonly.cc/uploads/tu/zyf/tt/20160520/j0qoejfukbu.jpg"></a></li>
		    <li><a href=""><img data-src="http://t1.mmonly.cc/uploads/tu/zyf/tt/20160520/oajlgqc2nud.jpg"></a></li>
		    <li><a href=""><img data-src="http://t1.mmonly.cc/uploads/tu/zyf/tt/20160520/kewnk2ermbe.jpg"></a></li>
	    </ul>
	  </div>
	</body>
</html>
<script>
var ul = document.querySelector("ul");
var img = [...document.getElementsByTagName("img")];

function insign (el) {
  var top = el.getBoundingClientRect().top; // 
  var h = window.innerHeight;
  return top <= h + 100;
}

function load () {
  img.forEach(img => {
  if(insign(img)) {
  	loadimg(img)
  	}
  })
}

function loadimg (el) {
  el.src = el.dataset.src;
}

function toggle (fn, context) { // 函数节流
  setTimeout(function(){
  fn.call(context)
  }, 2000)
}

window.onload = load;
window.onscroll = function(){
  toggle(load, window)  
}

</script>