当前位置：文江博客话题详情

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

发布于 2024-09-29 12:30:43 字数 136 浏览 2 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

脱离于你 2024-10-06 12:30:43

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

回复收藏 0 原文

冰雪梦之恋 2024-10-06 12:30:43

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

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

jquery simple image slider w/ajax< /a>

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

}

“

I don't know if this will help you, but the concept is to load the images in javascript, not in HTML because you could not prevent loading everything if it is in HTML.

Look at my answer to this question:

jquery simple image slider w/ajax

"I think you can do that with jcarousel:

http://sorgalla.com/jcarousel/

The trick is to pass the images one by one in javascript, not in html, if not, they are always loaded beforehand.

The code would be:

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>";

}

回复收藏 0 原文

~没有更多了~