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