Flexslider延迟加载

本文介绍了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++;