个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
28
4
问题是当用户第一次访问网站时， slider 没有正确显示。在测试 slider 工作正常。 
或者实际上存在的问题是它在第一次访问页面时不会加载，但会在(且仅在)您刷新页面时显示。但除此之外， slider 会显示但不会显示图像 
我在 Zurbs documentation for the Orbit slider 查看了 Zurb 的文档他们有一个示例文件，原始演示文件在图像上方有一个链接(我删除了) 
然后我使用关键字“轨道预加载图像”使用关于该主题的短语在 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 中查看图像 slider 设置代码。
该站点托管在不支持 php 的 .net 环境中的服务器上。
最佳答案
我遇到了同样的问题，经过一番研究，找到了适合我的答案；基本上，您可以使用 jquery 在加载时隐藏 slider 。另请参阅此链接以获取更多信息: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>
在包含轨道 slider 代码的 html 页面中(从您的页面复制的内容)
<!-- =======================================
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 中，您需要隐藏 #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; }
希望对您有所帮助!
关于javascript - 如何将图像预加载到 Orbit slider 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15845482/
28
4
0
我正在阅读哈德利的 Advanced R并尝试一些东西。我正在尝试创建一个 lazy闭包函数返回一个带有提供的函数 data.frame在其环境中以及使用 with并且能够在以后提供额外的函数参数。
我有两个 ViewController。初始 ViewController 是输入和存储 URL 的地方。此初始 ViewController 的 viewDidLoad 还应该在应用程序启动时开始加
你是怎么用的 对于应用程序中的 ListView 项也应该在设备 <11 上运行？ 由于 activated_state 在 HC 之前不可用，我只能想到两个肮脏的解决方法: 在您的 Activit
我正在为 android (2.1 > 3.1) 编写一个应用程序，我想使用熟悉的做法，即在 Honeycomb 应用程序中使用应用程序图标来进入家庭 Activity ，但是，当我之前运行该 Act
如果搜索的键不存在，我如何覆盖方法 GET 或编写一个将在服务器端执行的新函数返回另一个键值？ 示例: 如果关键字“word_1 word_2 word_3 word_4”不存在则搜索关键字“word
对于我的存储库，我使用的是 Git 和 Stash。在 Stash 端，我限制了(只读)对 master 的访问权限，因此任何用户都可以从 master 分支分支以获取功能/分支，但不能直接 merg
如何配置dgrid及其存储以定义渲染行时是否已经选择了行？ 例如，如果我的行数据是这样的： { id: 1, name: 'Item Name', selected: true } 我当前
有没有一种方法可以将变量从一个 BeanShell 前/后处理器引用到另一个 BeanShell 处理器(它们在同一个线程组中)？ 如果我在 HTTP 请求下的 BeanShell 预处理器中创建了一
问题 我已尝试添加预操作 shell 脚本，这些脚本会根据我正在构建的内容打开/关闭我的 .pch 文件中的某些定义。 但是，在运行构建时，没有任何反应。我不是一个流利的 shell 脚本编写者，所以
我有一个 HTML 字符串用作 jQuery 输入文档。 // the variable html contains the HTML code jQuery( html ).find( 'p' ).
在 Mercurial 中允许 merge 之前有没有办法进行一些检查？ 通过将以下内容添加到 ~/.hg/hgrc，我找到了更新前 Hook ，并拥有一个在允许更新之前运行的脚本: [hooks]
总结: 预 Controller Hook 是否在缓存期间执行？是否有任何 Hook 点可以执行？ (系统前？) 我应该强调一个事实，即 Hook 不会影响发送到浏览器的内容。这不是问题。 详细版:
我正在使用适用于 android 的 Skobbler Map API，到目前为止它一直非常好。按照官方的“操作方法”，我已经能够将 map 应用到我的应用程序中。比我可以让应用程序下载 map 并离
当我安装bcrypt时我的 hapi js 项目的模块尚未安装，它显示类似 node-pre-gyp install --fallback-to-build 我尝试通过运行来安装； npm i nod
我试图使用此代码的变体: apply plugin: 'java' apply plugin: 'idea' idea.workspace.iws.withXml { provider ->
假设我们有一个 PHP 项目，其依赖项 A 和 B 分别依赖于 PHP 库 X，但版本不同。 通常，人们会使用诸如 composer 之类的 PHP 依赖管理器，它可以通过在与 A 和 B 兼容的版本
这似乎违背了代码块的目的，但我希望能够在代码块中加粗。例如，如果我想将返回行加粗: int main(void) { **return 0;** } 最佳答案 您必须在 HTML 中执行此操作
我们是否应该使用 Huggingface(预)训练一个 BERT 无框模型的小写输入数据？我查看了 Thomas Wolf ( https://github.com/huggingface/trans
我有两个模式: 技能: var mongoose = require("mongoose"); var SkillSchema = new mongoose.Schema({ skill: {
我这里有问题。这适用于 Chrome，但我无法在 IE11 的 index.html 中使用任何动画。当它不想工作时，我会看到一个静态屏幕。同样在 IE 中，消息不会像它应该的那样消失。如果我将 di
我是一名优秀的程序员,十分优秀！