使用jQuery Cycle Plugin时如何避免预加载图像

时间:2010-10-29 08:00:33

标签: jquery cycle preload

我有一个带有大图片的幻灯片(jQuery Cycle),并希望在页面加载时AVOID预先加载所有图像。

相反,我只想加载第一张图片,并在用户点击后加载其余图片。

我真的很感激任何想法!这里的Javascript新手......非常感谢!!!!!

2 个答案:

答案 0 :(得分:2)

所以我找到的最佳解决方案是:http://tinyurl.com/24o2stc 使用jQuery Cycle中的“之前”选项,它只加载前2张幻灯片,并在您通过幻灯片显示单击时添加下一张幻灯片。

答案 1 :(得分:0)

我不知道这是否会对你有所帮助,但概念是用javascript加载图片,而不是用HTML加载,因为如果它是HTML格式的话你无法阻止加载。

看看我对这个问题的回答:

jquery simple image slider w/ajax

“我认为你可以用jcarousel做到这一点:

http://sorgalla.com/jcarousel/

诀窍是在javascript中逐个传递图像,而不是在html中传递,如果没有,它们总是预先加载。

代码如下:

var mycarousel_itemList = [
{url:"/im/a.jpg", title: ""},{url:"/im/b.jpg", title: ""}];

listaimg=document.createElement('ul');
jQuery(listaimg).attr('id','mycarousel');
jQuery(listaimg).addClass('jcarousel-skin-tango');
jQuery('#containercarousel').append(listaimg);
jQuery('#mycarousel').jcarousel({   auto: 9,wrap: 'last', visible: 1,scroll:1, size: mycarousel_itemList.length,
    itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}

   });


function mycarousel_itemLoadCallback(carousel,state){for(var i=carousel.first;i<=carousel.last;i++){if(carousel.has(i)){continue}if(i>mycarousel_itemList.length){break};

carousel.add(i,mycarousel_getItemHTML(mycarousel_itemList[i-1]));


  }
};
function mycarousel_getItemHTML(item)
{


  var img = new Image();
                 $J(img).load(function () {

// whatever you want to do while loading.
    }).attr('src', item.url);
 return "<li><img src=\"" + item.url + "\" width=\"770\" alt=\"\" /></li>";

}