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

我正在使用（尝试）一个名为的惰性加载脚本。该脚本还支持图像的多服务，但如果veiwport小于1298px，我似乎无法让它加载图像[尽管我没有要求该大小]。这在任何浏览器中都会发生。我还注意到，如果在1298px下刷新后，将窗口宽度拖动到1300px以上，则会触发脚本并下载图像

从我在开发者页面上看到的所有信息来看，这个插件在没有缺陷的情况下工作，所以我认为这是我自己的问题

我还使用并行延迟我所有的脚本&初始化所有东西，我放在里面的所有东西都很好，所以我怀疑这和我在这里发布的问题有什么关系

以下是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>

JcorsLoader.load(
“/wp content/themes/WalkingFish/assets/js/bLazy.js”，
函数（）{
var bLazy=新bLazy（）；
}
);
//加价-->

我正在工作的网站不是实时的，所以你可以检查任何缺陷的使用。还要注意瀑布

谢谢你的帮助-我将非常感激

*编辑*

---

我最终转向了另一个解决方案，即解决问题。bLazy似乎有一个bug，它无法在无序列表中运行。BttrLazyLoading.js工作得很好-只是它的两倍重。

无法访问您的页面。快速信息，可能会帮助你

1） 断点由设备宽度而不是浏览器宽度定义。这意味着它将查看您的屏幕宽度，当您调整浏览器窗口大小时，屏幕宽度不会改变。您可以在chrome中模拟设备宽度：

我之所以关注设备宽度而不是浏览器宽度，是因为在调整大小（每个图像有多个服务器请求）时，我不想为同一图像加载多个图像源。如果你有一个大屏幕，但你的浏览器窗口的初始宽度很小，我不想放大一个低分辨率的图像，如果你调整它的大小

2）

---

在第二个示例中，图像上没有任何占位符src，因此图像是0px x 0px，无法加载。您可以尝试添加一个占位符src，或者在CSS中添加一个大于零的最小宽度。

Thnx但我已经知道所有这些。我已经用5台手持设备和3台机器，以及798px网络书（无负载）和Chromes（金丝雀）仿真器进行了尝试。您现在可以访问该网站。。。Iv'e测试了你的演示pg&它在所有情况下都能工作（低至380px-loads small bear.jpg）…我只是在示例中遗漏了占位符，但它在工作示例中。正如我在您的站点反馈中提到的，背景图像不会加载到包装在

中，但在其他任何地方都有效。此示例/问题包含在

中。可能是一个bug？？有趣的是，如果我用包裹在标签周围的标签替换

标签，所有东西都会加载，但大小不正确….？嘿，安达罗。我又回来了。他出去旅行了。你又关闭了你的网站：）刚刚制作了一个快速代码笔，我在其中懒洋洋地加载无序列表中的图像和背景图像：