我有一个页面,上面有很多图像,只想按需加载额外的图像。 IE,如果用户单击它或将鼠标悬停在上面,等等。我见过的大多数(如果不是全部)滑块都使用隐藏属性,所有元素都会立即加载,这在我的情况下会造成过度的负担。
我喜欢:http://nivo.dev7studios.com/ http://nivo.dev7studios.com/但它没有这样的功能。
有人知道最好使用 jquery 的 ajax 滑块吗?
Thanks
我认为你可以用 jcarousel 做到这一点:http://sorgalla.com/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>";
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)