javascript - 使用 bLazy 延迟加载和多服务图像

Question

我正在使用(尝试)一个名为 bLazy found here-> 的延迟加载脚本。该脚本还支持图像的多重服务，但如果 veiwport 小于 1298px，我似乎无法让它加载图像 [即使我没有要求该大小]。这种情况在任何浏览器中都会发生。我还注意到，如果在刷新到 1298 像素以下后将窗口宽度拖动到超过 1300 像素，则会触发脚本并下载图像。

据我在开发者页面上所知，这个插件工作没有缺陷，所以我认为这是我的事情。

我还使用 JcorsLoader 并行推迟所有脚本并初始化所有内容 - 我放入其中的所有内容都工作正常，所以我怀疑它与我在此处发布的问题有任何关系...？

这就是 bLazy 的加载和初始化方式:

JcorsLoader.load(

..., //jQuery loaded here then bLazy

'/assets/js/bLazy.js',
    function() {
        var bLazy = new Blazy({
            breakpoints: [ //--max-width -->
                {width: 480, src: 'data-src-small'},
                {width: 768, src: 'data-src-medium'},
                {width: 1024, src: 'data-src-large'},
            ]
        });
    },

... //And other scripts/libraries here
);

HTML 标记:

. . .
<li>
    <img class="b-lazy"
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="http://myCDN.com/image/upload/f_auto/v1394566529/IQGIX3.jpg"
        data-src-small="http://myCDN.com/image/upload/f_auto/v1394590286/IQGIX3-small.jpg"
        data-src-medium="http://myCDN.com/image/upload/f_auto/v1394566529/IQGIX3-medium.jpg"
        alt="alt-text" />
    <!-- Fallback content for non-JS browsers. -->
    <noscript><img src="http:myCDN.com/image/upload/f_auto/v1394566529/IQGIX3.jpg" alt="Alt text"/></noscript>
</li>
. . .

另请注意，如果我不使用多服务(参见下面的示例)功能，我会得到相同的结果 - 如果视口(viewport)小于 1298px，则不会加载图像。

JcorsLoader.load(
    '/wp-content/themes/WalkingFish/assets/js/bLazy.js',
    function() {
        var bLazy = new Blazy();
    }
);

<li>// Mark up -->
    <img class="b-lazy"
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="http://myCDN.com/image/upload/f_auto/v1394566529/IQGIX3.jpg"
        alt="alt-text" />
    <!-- Fallback content for non-JS browsers. -->
    <noscript><img src="http://myCDN.com/image/upload/f_auto/v1394566529/IQGIX3.jpg" alt="Alt text"/></noscript>
</li>

我正在工作的网站不是实时 but I'll open it up here，因此您可以检查使用情况是否存在任何缺陷。另请注意瀑布。

感谢您的帮助 - 我将不胜感激!!

*编辑 * 我最终转向了另一个运行顺利的解决方案。 bLazy 似乎有一个错误，它无法在无序列表中运行。 BttrLazyLoading.js 效果很好 - 它的重量只有两倍。

Answer 1

无法访问您的页面。可能对您有帮助的快速信息!

1) 断点是由设备宽度而不是浏览器宽度定义的。这意味着它会查看您的屏幕宽度，当您调整浏览器窗口大小时，该宽度不会改变。您可以在 Chrome 中模拟设备宽度:https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#enable-emulation-panel .

我查看设备宽度而不是浏览器宽度的原因是，我不想在调整大小时加载同一图像的多个图像源(每个图像多个服务器请求)。如果你有一个大屏幕，但浏览器窗口的初始宽度很小，我不想在调整大小时放大低分辨率图像。

2) 在第二个示例中，您的图像上没有任何占位符 src，为什么图像为 0px x 0px 并且无法加载。您可以尝试添加占位符 src 或在 CSS 中添加大于零的最小宽度。