Question

我想将 b-lazy插件与“picture”标签一起使用。这里默认的src属性与“data-arc”属性一起使用。和src属性用于延迟加载图像..但我怎么能使用这个插件图片标签...？ b-lazy插件支持html5“picture”和“img”标签。（this is support info link）但是如何实现这个.. 这是我的HTML代码：

这是b-lazy插件链接B-lazy plugin

 <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>

我如何使用带有html5“picture”标签的b-lazy插件

1 个答案: