延迟加载div内容与html5音频

Question

我正在尝试在电子商务网站上实施产品。这些产品都有一个html音频剪辑 - 我面临的问题是只有一些剪辑正在加载。我在想，如果我可以在每个行的容器div上使用延迟加载＆＃39;那么这将解决问题。请参见随附的屏幕截图和html下面的

PS：我只能找到img load lazy load scripts。请帮忙！ ：）

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all

http://codepen.io/anon/pen/BNXOzg

<div class="container">

<div class="product-row cf">

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->  

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->    

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->  

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->    

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->  

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->    

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->  

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->