1

我有一个带有大图像的幻灯片（jQuery Cycle），并且希望避免在页面加载时预加载所有图像。

相反，我只想加载第一个图像，并在用户点击它之后加载其余的图像。

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

4

2 回答 2

2

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

于 2010-10-29T23:46:35.303 回答
0

我不知道这是否会对您有所帮助，但这个概念是在 javascript 中加载图像，而不是在 HTML 中，因为如果它是在 HTML 中，您无法阻止加载所有内容。

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

带有ajax的jquery简单图像滑块

“我认为你可以用 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>";

}

"

于 2010-10-29T09:04:32.647 回答