lazyLoad 懒加载

2019-04-23 11:51:22 阅读:4 编辑
<!DOCTYPE HTML PUBLIC "-//W3 C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        test
    </title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">

</head>
<body>
<?PHP
$list = [];
for ($i=0; $i < 20; ++$i){$list [] = "http://placeimg.com/500/300/any/".$i;
}
?>
<?PHP
foreach ($list as $item){?>
<img src="http://91 yunying.xmyunce.com/img/91_default.jpg" data-src="<?PHP echo $item ?>" alt=""class="lazy"><br>
    <?PHP}
?>
</body>
<script src="https://cdn.jsdelivr.net/NPM/vanilla-lazyload@11.0.6/dist/lazyload.min.js"></script>
<script>
    var lazyLoadInstance = new LazyLoad ({elements_selector: ".lazy"});
    if (lazyLoadInstance) {lazyLoadInstance.update ();
    }
</script>
</HTML>