如何控制 Nivoslider 预加载图像的方式?

发布于 2024-10-29 04:48:42 字数 254 浏览 6 评论 0原文

我正在使用优秀的 Nivoslider 插件在我的主页上展示一组照片,目前有 5 张。一切工作正常,但每张照片增加了大约 150K 的页面重量。我实际上想展示大约 10 张“幻灯片”,但由于所有这些图像都是在页面打开时预加载的,页面重量很快就会变得(太大)大,特别是因为许多用户可能不会等待“展示”完成。

我想知道是否可以预加载图像,或者更好的是,只加载 x 个图像。我在文档中找不到任何有关它的信息,所以我认为它本身不受支持。有什么想法吗?

I'm using the excellent Nivoslider plugin to showcase a set of photos on my homepage, currently 5. All is working fine, but each photo adds about 150K to the page weight. I would actually want to showcase about 10 "slides", but since all these images are preloaded at the opening of the page, the page weight will soon become (too) large, especially since many users will likely not wait for the "show" to finish.

I was wondering if it is possible to not preload images, or beter, only x images ahead. I can't find anything about it in the documentation, so I presume it is not natively supported. Any ideas?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(6

夜唯美灬不弃 2024-11-05 04:48:42

我一直在寻找类似的解决方案。我在网站上有一个图像库,使用幻灯片插件在主页上加载十几个高质量图像。所有这些图像都会立即加载,从而使页面重量增加 2-3 兆。没有骰子。

Nivo 将图像处理留给浏览器。它读取 标签,然后将图像整理成具有平滑过渡效果的幻灯片。代码中没有任何内容可以控制图像的加载或预加载。

幸运的是 Nivo 在 Github 上。所以我分叉它来支持图像的延迟加载:

https://github.com/leepowers/Nivo-Slider

是一样的。通过对 HTML 进行一个小更改,

<div id="slider">
 <img src="my-large-image.jpg" alt="">
 <img src="my-large-image2.jpg" alt="">
 <img src="another-biggun.jpg" alt="">
</div>

将图像 src 属性更改为 data-src 属性:

<div id="slider">
 <img data-src="my-large-image.jpg" alt="">
 <img data-src="my-large-image2.jpg" alt="">
 <img data-src="another-biggun.jpg" alt="">
</div>

由于 data-src 未解析,因此图像不会被解析直到 Nivo 准备好使用它们为止。 data-src 优先于 src,这意味着您可以在 src 中为非 JavaScript 用户指定低分辨率版本,或者填充 src 带有间隔图像,以便 HTML 将通过验证器。

一探究竟!我正在几个项目中实施它。此处提供演示:http://powers1.net/files/nivo/demo/demo-lazy。 html

I've been looking for a similar solution. I have an image gallery on a web site that loads a dozen high-quality images on the home page using a slideshow plugin. And all these images are being loaded at once adding 2-3 megs to the page weight. No dice.

Nivo leaves image handling up to the browser. It reads the <img src="..."> tag and then gussies up the images into a slideshow with slick transition effects. There's nothing in code to control the loading or preloading of images.

Fortunately Nivo is on Github. So I forked it to support lazy loading of images:

https://github.com/leepowers/Nivo-Slider

The usage is the same. With one small change to the HTML

<div id="slider">
 <img src="my-large-image.jpg" alt="">
 <img src="my-large-image2.jpg" alt="">
 <img src="another-biggun.jpg" alt="">
</div>

Change the image src attributes to data-src attributes:

<div id="slider">
 <img data-src="my-large-image.jpg" alt="">
 <img data-src="my-large-image2.jpg" alt="">
 <img data-src="another-biggun.jpg" alt="">
</div>

Since data-src is not parsed the images aren't loaded until Nivo is ready to use them. data-src has precedence over src which means you can specify low-res versions in src for non-javascript users, or populate src with a spacer image so the HTML will pass a validator.

Check it out! I'm implementing it on several projects. A demo is available here: http://powers1.net/files/nivo/demo/demo-lazy.html

独行侠 2024-11-05 04:48:42

Nivo 滑块没有图像预加载器。如果您将滑块与 jQuery 加载事件一起使用(如 nivo 的演示中),nivo 滑块将等待页面中加载所有图像。

$(window).load(function() {
        $('#slider').nivoSlider();
});

如果您不想等到所有图像加载完毕,您可能更喜欢如下所示的文档就绪事件。不会预加载任何图像。

$(document).ready(function() {
   $('#slider').nivoSlider(); 
});

如果你想有一个受控的预加载;
您可以使用 jQuery 的图像预加载插件之一,例如;
http://www.farinspace.com/jquery-image-preload-plugin/

$(document).ready(function() {
   $('#slider').nivoSlider(); 
   //Before starting the slider preload your images then start your slider.
   $.imgpreload(['/images/a.gif','/images/b.gif'],
   {
    all: function()
    {
       //Start slider here
    }
   });
});

Nivo slider does not have an image preloader. If you are using your slider with jQuery load event(as in demos of nivo), nivo slider will wait until all images loaded in page.

$(window).load(function() {
        $('#slider').nivoSlider();
});

If you do not want to wait until all images loaded you might prefer document ready event as below. No images will be preloaded.

$(document).ready(function() {
   $('#slider').nivoSlider(); 
});

If you want to have a controlled preloading;
You may use one of image preload plugins of jQuery like;
http://www.farinspace.com/jquery-image-preload-plugin/

$(document).ready(function() {
   $('#slider').nivoSlider(); 
   //Before starting the slider preload your images then start your slider.
   $.imgpreload(['/images/a.gif','/images/b.gif'],
   {
    all: function()
    {
       //Start slider here
    }
   });
});
风尘浪孓 2024-11-05 04:48:42

您可以创建一个函数将图像放入数组中并预加载

jQuery.preloadImages = function() {   
 for(var i = 0; i<arguments.length; i++)   
{
      jQuery("<img>").attr("src", arguments[i]);   
}

}

并使用该函数,提供图像 url 数组:

$.preloadImages("test.png", "/imageUrl");

you can create a function to put the images in a array and preload

jQuery.preloadImages = function() {   
 for(var i = 0; i<arguments.length; i++)   
{
      jQuery("<img>").attr("src", arguments[i]);   
}

}

and for use the function, provide an array of image urls :

$.preloadImages("test.png", "/imageUrl");
心房敞 2024-11-05 04:48:42

如果默认情况下在页面加载时,您使用图像的子集初始化滑块,该怎么办?接下来使用 jQuery 动态创建图像并重新初始化滑块?请参阅以下使用 ajax 调用的示例。

Nivoslider 更新或重新启动甚至销毁

What if by default on page load, you initialise the slider with a subset of the images. Following which you dynamically create the images using jQuery and re-initialise the slider? See the following for an example using an ajax call.

Nivoslider update or restart or even destroy

中性美 2024-11-05 04:48:42

Burak 的答案对我来说很好,但它在 Safari 中不起作用。
我尝试修改,这是我的解决方案:

$(window).ready(function() {
   $('#slider').nivoSlider(); 

它在 Safari、IE 和 Firefox 中正常工作。当然,您可以添加受控预载。

The answer from Burak is fine for me, but it does not work in Safari.
I tried to modify and this is my solution:

$(window).ready(function() {
   $('#slider').nivoSlider(); 

It works properly in Safari, IE and Firefox. Of course, you can add the controlled preload.

烟若柳尘 2024-11-05 04:48:42

您可以隐藏 #slider 直到页面加载,然后加载 div。

  1. display:none; 附加到 CSS 文件中的 #slider

  2. $(window).load(function() {..}) 中添加 $('#slider').css('display','block'); ; 与您现有的代码一起,所以它变成:

    $(窗口).load(function() {
        $('#slider').css('显示','块');
    });
    

You can hide the #slider until the page loads and then load the div.

  1. Append display:none; to the #slider in your CSS file.

  2. Add $('#slider').css('display','block'); in your $(window).load(function() {..}); along with your existing code, so it becomes:

    $(window).load(function() {
        $('#slider').css('display','block');
    });
    
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文