文章/答案/技术大牛

发布

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>

可能遇到的问题及解决方法

问题：图片懒加载不工作，图片始终未加载。

原因：

iScroll.js未正确初始化。
图片的data-src属性未设置或设置错误。
检查元素是否在视窗内的逻辑有误。

解决方法：

确保iScroll.js库已正确引入，并且初始化代码无误。
检查所有需要懒加载的图片是否有data-src属性，并且属性值是正确的图片URL。
调试滚动事件处理函数，确保它能正确地检测到图片何时进入视窗。

通过以上步骤，通常可以解决图片懒加载不工作的问题。如果问题依旧存在，可能需要进一步检查网络请求或浏览器控制台的错误信息。

页面内容是否对你有帮助？

有帮助

没帮助

如何使此插件与jQuery移动版协同工作？

jquery、jquery-mobile、page-init

我用这个来引用它：整个插件(iscroll.js('#transPage, #categorizePage, #IDKPage').live('pageinit', function( ){a lot of stuff}); 这样就不需要刷新就可以<

浏览 0提问于2012-12-17得票数 0

3回答

如何使用asp.net在datalist for Images中应用按需加载(惰性加载)概念？

asp.net、c#-4.0、scroll、lazy-loading、datalist

在我的asp.net应用程序中有一个数据列表，页面加载事件我必须绑定多个图片项(1000个)，如何应用按需加载(可以说是懒加载图片)(当滚动页面的时候只需要绑定像facebook这样的新需求页面)SqlCommand comd = new SqlCommand("usp_GetSubCategoryProdu

浏览 2提问于2012-09-13得票数 1

回答已采纳

2回答

如何延迟加载图像，同时仍然显示给禁用了javascript的用户

javascript、html

在读了其他一些帖子后，我开始怀疑这是否可能如果我包含页面上设置了src属性的所有图像，我认为不可能停止跨浏览器加载图像的想法是正确的吗？

浏览 0提问于2011-07-15得票数 3

回答已采纳

1回答

phonegap -放大swiper.js幻灯片

zooming、iscroll、swiper

我有一个幻灯片，我使用swiper.js --我使用iscroll.js实现缩放功能。有人知道怎么做吗？提前感谢

浏览 5提问于2015-01-25得票数 0

4回答

如何在jQuery手机中使用`paginit`加载外部Javascript文件？

jquery、jquery-mobile

除非我点击刷新，否则滚动条不会加载。我假设这个问题可以使用jQuery移动的pageinit来修复。这是我尝试过的：$.getScript('cubiq-iscroll-bad88fb/src/iscroll.js

浏览 1提问于2012-12-14得票数 1

回答已采纳

1回答

无抖动的opencv开放图像

c++、image、opencv

我正在使用opencv2打开一系列图像(在树莓派上)，我发现过渡非常陡峭(即打开图像)，有什么方法可以平滑这一点吗？ void loadImage()int nImages = 6; {char filename[100];sprintf(frameNo, "%03i", i); s

浏览 2提问于2012-11-23得票数 0

回答已采纳

3回答

在J2ME中加载图像？

image-processing、java-me、loading、sprite

我对J2ME上的概念并不陌生，但我有点懒:最近我的应用程序把图片像糖果一样加载到内存中……我不确定这是不是最好的方式，但它在我的摩托罗拉Z6上运行良好，直到昨晚，我在一部旧的三星手机上测试了这个应用程序，图像甚至无法加载，并且需要多次尝试启动线程才能显示出来屏幕是白色的，所以我意识到这一定是关于图像加载的事情，我

浏览 1提问于2009-05-28得票数 2

回答已采纳

4回答

图片需要一段时间才能加载到网站吗？

javascript、jquery

我在几个小时前写了一个类似的帖子，但它写得很糟糕，而且很懒。所以我再发一次，因为我毁了这篇文章，但仍然需要帮助。对于那些读过第一篇文章的人，我很抱歉，这篇文章太糟糕了。这是我的网站：导致加载时间缩短的原因是什么？我该如何解决这个问题呢？仅供参考，我目前正在用c

浏览 0提问于2015-07-04得票数 2

2回答

延迟加载还是初始等待时间？

android、user-interface、lazy-loading

我一直是懒加载的狂热粉丝，但昨天我和一位程序员同事聊天，他向我展示了另一个应用程序，并表示他对应用程序加载列表所需的初始等待时间(准确地说是Android Marketplace )感到非常高兴，并允许他顺利地滚动，而不是实现懒加载，让他的生活变得痛苦…… 虽然我可以使用后台图像下载来让延迟加载工作，让整个过程感觉不受干扰，但我仍然不确定哪种设计方法是首选的……有什么建议吗？

浏览 1提问于2009-10-07得票数 4

回答已采纳

1回答

懒加载怎么办？(Android)

java、android、json、lazy-loading、picasso

在我加载所有数据之前，如果用户进入应用程序，我使用isynk任务。但现在我需要使用惰性加载(例如:instagram)，如果我没有互联网，我可以看到最后一篇文章(图像，文本)。如果我下拉列表，加载新数据。我不明白这是怎么做的。我看到了示例，但我不能理解如何获得json，然后添加惰性加载。请给我讲解或简单的一课

浏览 1提问于2015-04-25得票数 0

1回答