如何使用帶有html5“圖片”標簽的b-lazy插件

Question

我想使用帶有“圖片”標簽的b-lazy插件 。 這里的默認src屬性與“ data-arc”屬性一起使用。 和src屬性用於延遲加載圖片..但是如何使用此插件圖片標簽...？ b-lazy插件支持html5“圖片”和“ img”標簽。（ 這是支持信息鏈接 ），但我如何實現此功能。這是我的html代碼：

這是b-lazy插件鏈接B-lazy插件

 <picture class="b-lazy">
        <source
            media="(max-width: 767px)"
            srcset="imagepath/imgname.jpg">
        <source
            media="(max-width: 1024px)"
            srcset="imagepath/imgname.jpg">
        <source
            media="(max-width: 1920px)"
            srcset="imagepath/imgname.jpg">
        <source
            media="(max-width: 3840px)"
            srcset="imagepath/imgname.jpg">                 
        <img

            src="img/photos/h.jpg"
            data-src-small="" 
            alt="The Oslo Opera House">                             
    </picture>

這是我的js代碼：

if ($("body").hasClass("page_id_images")) {
     //Global blazy module starts
     var bLazy = new Blazy({
          breakpoints: [{
                    width: 767, // max-width
                    src: 'data-src-small'
                     },
                     {
                    width: 1024, // max-width
                    src: 'data-src-medium'
                     },

                    {
                     width: 1920, // max-width
                     src: 'data-src-desktop'
                    },

                    {
                     width: 3840, // max-width
                     src: 'data-src-large'
                }],
         error: function(ele, msg) {

             var image = $(ele)[0];
             if (msg === 'missing') {
                 console.warn("Custom ERROR: ", image, " data-src is missing\n");
             } else if (msg === 'invalid') {
                 console.warn("Custom ERROR: ", image, " data-src is invalid\n");
             }
         }
     });
 }    

Answer 1

這是這個問題的答案，我正試圖找出..

    <picture> 
    <source 
         media="(min-width: 650px)"
         data-srcset="image-650.jpg" /> 
    <source 
         media="(min-width: 465px)" 
         data-srcset="image-465.jpg" />
    <img class="b-lazy"
         data-src="default.jpg" />
</picture>