Flexslider延迟加载-仅在真正需要时加载图像 [英] Flexslider lazyloading - only load an image when it's truly needed
本文介绍了Flexslider延迟加载-仅在真正需要时加载图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这实际上仅是对Flexslider延迟加载此处的回答使用下面粘贴的代码.我想更改它,以便仅在真正需要时才加载图像.
This is really only following on from an answer to Flexslider lazyloading here I am using that code which I Have pasted below. I would like to alter it so that images only loaded when truly needed.
我在之前和之后尝试了其他Flexslider属性,但是它们在第一张幻灯片上产生了延迟吗?请为我提供一些帮助.
I tried the other Flexslider properties, before: and after: but they created a delay on the first slide? Please can I get some help with this.
$('#slider').flexslider({
start: function (slider) {
// lazy load
$(slider).find("img.lazy").each(function () {
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src");
});
}
});
推荐答案
最后我得到了一些帮助,这里的代码更少:)
I got some help in the end, here we have less code :)
jQuery:
$(window).load(function() {
$('#sld-auto-930').flexslider({
// put your settings properties here
after: function (slider) {
//instead of going over every single slide, we will just load the next immediate slide
var slides = slider.slides,
index = slider.animatingTo,
$slide = $(slides[index]),
$img = $slide.find('img[data-src]');
if($img){
$img.attr("src", $img.attr('data-src')).removeAttr("data-src");
}
}
});
HTML:
if($i > 0) {
echo '<img class="lazy'.$i.'"src="" data-src="'.$src.'" alt="'.$alt.'">';
}else {
echo '<img class="first'.$i.'"src="'.$src.'" alt="'.$alt.'">'; }
$i++;
这篇关于Flexslider延迟加载-仅在真正需要时加载图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文