问题在于当用户首次访问网站时,滑块未正常显示。测试中,滑块运行良好。
或者实际上存在问题,即在首次访问页面时,它无法加载,但只有在刷新页面时才会显示出来。但除此之外,滑块会显示,但图像不会显示。
我查看了Zurb的文档Zurb Orbit滑块的文档,他们有一个示例文件。该原始演示文件在图像上方有一个链接(我已删除)。
我已经添加了脚本,但仍未加载。该页面的完整代码可在GitHub上的Gist中查看。
图像滑块的设置代码可在GitHub上的Gist中查看。
该网站托管在一个不支持php的.net环境服务器上。
![加载后的滑块](https://istack.dev59.com/ayssH.webp)
![滑块加载缓慢](https://istack.dev59.com/4JMCf.webp)
![演示代码](https://istack.dev59.com/7GGhh.webp)
我随后使用关键词“轨道预加载图片”在Google上进一步搜索了有关此主题的信息,并找到了一个带有预加载功能的解决方案。以下是我用来预加载的代码(我只修改了图像的路径)
<script language="javascript">
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
preload([
'../images/products/mill/slider/dentist.jpg',
'../images/products/mill/slider/side.jpg',
'../images/products/mill/slider/before.jpg',
'../images/products/mill/slider/after.jpg',
'../images/products/mill/slider/radio.jpg'
]);
</script>
我已经添加了脚本,但仍未加载。该页面的完整代码可在GitHub上的Gist中查看。
图像滑块的设置代码可在GitHub上的Gist中查看。
该网站托管在一个不支持php的.net环境服务器上。