如何将图像预载入Orbit滑块？

问题是用户第一次访问该网站时滑块无法正确显示。在测试滑块工作正常。 How the slider is after loading 如何将图像预载入Orbit滑块？

或者实际上存在一个问题，即在第一次访问该页面时它不会加载，但会在刷新页面时（并且仅在此时显示）出现。但除此之外滑块显示出来，但没有图像 How the slider loads poorly

我看着从Zurb文档在Zurbs documentation for the Orbit slider，他们有一个示例文件，即原来的演示文件具有图像上方的链接（我已删除） Code from the demo

然后，我使用关键词“轨道预加载图像”关于此主题的短语在Google上搜索了更多内容，并找到了具有预加载功能的One solution。下面是我用预加载代码（我只修改了路径图像）

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

我继续添加脚本，但它仍然是不加载。该页面的完整源代码的图像滑块设置一个Gist on GitHub

代码可视处于Gist on GitHub

查看该网站是在.NET环境中是不服务器上托管支持php。

来源

2013-04-06 JGallardo

我有同样的问题，经过一番研究，找到了适合我的答案; 基本上，你可以使用jquery在加载时隐藏滑块。另见，这个环节作进一步的信息：how to show div #loading whilst div #content loads

看着your code，这应该工作（未经测试）

在<head>部分，添加此;

<script type="text/javascript"> 
jQuery(document).ready(function() { 
// hide orbit slider on load when user browses to page 
$('#featured.orbit').hide(); // hide div, may need to change id to match yours 
$('.loading').show(); // show the loading gif instead 

// then when the window has fully loaded 
$(window).bind('load', function() { 
$('.loading').hide(); // hide loading gif 
$('#featured.orbit').fadeIn('slow'); // show orbit 
}); 
}); 
</script>

在包含轨道滑块码（内容从网页复制）

<!-- ======================================= 
ORBIT SLIDER CONTENT 
======================================= --> 
<div style="width:100%;"> 
<div style=" max-width:480px; margin: 0px auto;"> 
<div id="featured" > 
<!-- your content etc..... --> 
<span class="orbit-caption" id="radioCaption">Radiograph shows crown seated with 
excellent marginal integrity</span> 
</div> 
</div> 


<?php // 
// load the loading image - you need to add one to your image directory 
// see here to generate one: http://www.ajaxload.info/ ?> 
<div class="loading"> 
<img src="http://www.yourdomain.com/path/to/folder/loading.gif"/>  
</div> 


</div> <!-- end twelve columns-->

在你的CSS的HTML页面，你需要隐藏#featured DIV

#featured { display: none; background: #f4f4f4; height: 600px;} 
#featured img { display: none; } 
#featured.orbit { background: none; } 
.loading {margin: 0 auto;text-align:center;margin:30px; }

希望这有帮助！

来源

2013-04-25 02:49:39 Sol

伟大的答案，我应该提到，该网站的服务器是在.net环境，不支持PHP。你会知道如何解决这个问题吗？ – JGallardo 2013-04-25 16:21:57

我从你的文件中获取了代码，所以你只需要添加到该文档（以及标题和CSS）。上面没有任何PHP代码 - 只有您可以放心忽略的注释文本。 – Sol 2013-04-25 21:57:35

如何将图像预载入Orbit滑块？

回答

相关问题