首页 > 代码库 > 关于图片懒加载的用法

关于图片懒加载的用法

2024-08-23 20:07:02   220人阅读

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style>
  ul {
    margin: 0 auto;
    padding: 0;
    width: 300px;
    list-style: none;
  }
  .lazy {
    margin-bottom: 100px;
    width: 300px;
    height: 168px;
    text-align: center;
    line-height: 168px; /*垂直居中*/
  }
    
</style>
<body>
    <ul>
      <li class=‘lazy‘><img data-original=‘images/0.jpg‘ src=http://www.mamicode.com/‘images/loading.gif‘/>"transition: ‘‘; opacity: 0;"
          if (obj.dataset) 
            imageLoaded(obj, obj.dataset.original);
          else 
            imageLoaded(obj, obj.getAttribute(‘data-original‘));
        }
        if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isShow) {
          obj.isShow = true;
          obj.style.cssText = "transition: 1s; opacity: 1;"
        }
      }
    }
    function imageLoaded(obj, src) {
      var img = new Image();
      img.onload = function() {
        obj.src = http://www.mamicode.com/src;>

　　

关于图片懒加载的用法


联系
我们