iscroll.js图片懒加载

iScroll.js 是一个用于移动端的滚动插件，它提供了平滑的滚动效果，并且支持多种滚动事件。图片懒加载是一种优化网页性能的技术，它通过延迟加载页面上的图片，直到这些图片即将进入用户的视野范围，从而减少初始页面加载时间，提高用户体验。

基础概念

图片懒加载：当用户滚动页面时，只加载当前视窗内的图片，而视窗外的图片则延迟加载，直到它们即将出现在视窗内。

iScroll.js：一个JavaScript库，用于在移动设备上实现平滑的滚动效果，并且支持自定义滚动事件。

类型

基于事件的懒加载：监听滚动事件，当图片进入视窗时加载。
基于Intersection Observer API的懒加载：使用现代浏览器提供的API来检测元素是否可见。

应用场景

新闻网站：页面上有很多图片，但用户可能只看前几条新闻。
电商网站：产品列表页有很多商品图片，用户可能只浏览部分商品。
社交网络：用户的时间线上有大量图片，按需加载可以提高性能。

实现示例

以下是一个简单的iScroll.js结合图片懒加载的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载示例</title>
    <style>
        .lazy {
            width: 100%;
            height: 200px;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <!-- 图片列表 -->
        <img class="lazy" data-src="image1.jpg" alt="Image 1">
        <img class="lazy" data-src="image2.jpg" alt="Image 2">
        <!-- 更多图片... -->
    </div>

    <script src="iscroll.js"></script>
    <script>
        var myScroll = new IScroll('#wrapper', {
            probeType: 3,
            mouseWheel: true
        });

        myScroll.on('scroll', function () {
            var lazyImages = document.querySelectorAll('.lazy');
            lazyImages.forEach(function (img) {
                if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && getComputedStyle(img).display !== "none") {
                    img.src = img.dataset.src;
                    img.classList.remove('lazy');
                }
            });
        });
    </script>
</body>
</html>