如何控制 Nivoslider 预加载图像的方式?
我正在使用优秀的 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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
我一直在寻找类似的解决方案。我在网站上有一个图像库,使用幻灯片插件在主页上加载十几个高质量图像。所有这些图像都会立即加载,从而使页面重量增加 2-3 兆。没有骰子。
Nivo 将图像处理留给浏览器。它读取
![](...)
标签,然后将图像整理成具有平滑过渡效果的幻灯片。代码中没有任何内容可以控制图像的加载或预加载。幸运的是 Nivo 在 Github 上。所以我分叉它来支持图像的延迟加载:
https://github.com/leepowers/Nivo-Slider
是一样的。通过对 HTML 进行一个小更改,
将图像
src
属性更改为data-src
属性:由于
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
Change the image
src
attributes todata-src
attributes:Since
data-src
is not parsed the images aren't loaded until Nivo is ready to use them.data-src
has precedence oversrc
which means you can specify low-res versions insrc
for non-javascript users, or populatesrc
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
Nivo 滑块没有图像预加载器。如果您将滑块与 jQuery 加载事件一起使用(如 nivo 的演示中),nivo 滑块将等待页面中加载所有图像。
如果您不想等到所有图像加载完毕,您可能更喜欢如下所示的文档就绪事件。不会预加载任何图像。
如果你想有一个受控的预加载;
您可以使用 jQuery 的图像预加载插件之一,例如;
http://www.farinspace.com/jquery-image-preload-plugin/
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.
If you do not want to wait until all images loaded you might prefer document ready event as below. No images will be preloaded.
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/
您可以创建一个函数将图像放入数组中并预加载
}
并使用该函数,提供图像 url 数组:
you can create a function to put the images in a array and preload
}
and for use the function, provide an array of image urls :
如果默认情况下在页面加载时,您使用图像的子集初始化滑块,该怎么办?接下来使用 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
Burak 的答案对我来说很好,但它在 Safari 中不起作用。
我尝试修改,这是我的解决方案:
它在 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:
It works properly in Safari, IE and Firefox. Of course, you can add the controlled preload.
您可以隐藏
#slider
直到页面加载,然后加载 div。将
display:none;
附加到 CSS 文件中的#slider
。在
$(window).load(function() {..}) 中添加
与您现有的代码一起,所以它变成:$('#slider').css('display','block');
;You can hide the
#slider
until the page loads and then load the div.Append
display:none;
to the#slider
in your CSS file.Add
$('#slider').css('display','block');
in your$(window).load(function() {..});
along with your existing code, so it becomes: