使用bLazy进行延迟加载和多服务图像

时间:2014-03-12 18:01:53

标签: javascript responsive-design lazy-loading

我正在使用(尝试)一个名为bLazy found here->的延迟加载脚本。该脚本还支持多图像处理,但如果veiwport小于1298px,我似乎无法加载图像[即使 - 虽然我没有调用该大小]。这在任何浏览器中都会发生我还注意到,如果在1298px下刷新后将窗口宽度拖动到1300px以上,则会触发脚本并下载图像。

从开发人员页面上我可以看出,这个插件没有缺陷,所以我在想我的东西。

我也在使用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>
. . .

另请注意,如果我不使用多服务(参见下面的示例)功能,我会得到相同的结果 - 如果视口小于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,因此您可以检查任何缺陷的使用情况。还要注意瀑布。

Thnx的帮助 - 我将不胜感激!!

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

1 个答案:

答案 0 :(得分:1)

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

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

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

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