由于图像加载量的原因,我的网站有时加载速度有点慢.由于所有png叠加和图标,我实际上在我的主页上有61张图像.我考虑使用精灵或图像地图,但我真的不喜欢这样做.我知道我的服务器只能有2个请求,所以如果我将图像托管在其他地方,它会加快时间,但是,这可靠吗?Pingdom工具说我的网站有超时"超时".我正在寻找一种解决方案:
A)在不同的服务器上展开我的图像(但是我想把它放在可靠的服务器上(我的!)
B)仅使用少量图像精灵或其他css技术
C) ???有任何想法吗?
提前致谢.
更新1:我创建了6个子域,并在这些子域中拆分了所有图像.你可以看到正常的网站有一个文件夹中承载的所有图像在这里,你可以在6子域看到相同的位点上的图片在这里.**正如你所看到的,与整个子域的图像加载慢WAYY网站.这是为什么?我不明白!
更新2:我打电话给我的托管公司,他们似乎认为子域解决方案无法解决问题,只会降低速度,因为每个子域都没有唯一的IP.我的服务器正在经历高负载,因此解释了一些延迟,但仍然存在此图像问题.他说我最好的就是使用亚马逊服务,这就是我现在要调查的内容.
我仍然有一个问题的理解是某些图像文件的滞后.如果您查看firebug中的页面加载结果(请参阅下面的BalusC答案),则需要花费大量的等待时间来加载某些图像.我想知道为什么.
我一直在网上搜索一段时间,试图找到编写执行这个简单任务的jquery脚本的最佳方法:使用优雅的淡入淡出效果在悬停时交换图像.我找到了许多解决方案(某种方式来笨重和笨重),并将其缩小到我认为最好的两个方面:
http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
出于我的目的,我希望能够在一个页面上多次执行此悬停交换.该页面是http://www.vitaminjdesign.com.我目前在我的"服务导航"(不同类型的悬停)上盘旋,但我想将它们应用于所有导航按钮,以及页脚中的社交图标.所有的悬停都是相同的 - 两个图像文件,一个在悬停时淡入另一个,并在休假时返回.最好的方法是什么?也许上面的一个链接?
我正在使用wordpress和woocommerce(电子商务插件)来定制购物车.在我的functions.php中,我将数据存储在变量中,如下所示:
add_action( 'woocommerce_before_calculate_totals', 'add_custom_price' );
function add_custom_price( $cart_object ) {
foreach ( $cart_object->cart_contents as $key => $value ) {
$newVar = $value['data']->price;
}
}
Run Code Online (Sandbox Code Playgroud)
我需要能够$newVar在不同的功能中使用,以便我可以在页面的不同区域回显结果.例如,如果我有以下功能,我将如何$newVar在其中使用?
add_action( 'another_area', 'function_name' );
function function_name() {
echo $newVar;
}
Run Code Online (Sandbox Code Playgroud)
我怎样才能做到这一点?
我正在使用模板来构建一个页面组合网站.联系表格非常奇怪.我无法在任何联系人字段中输入空格.
我正在使用以下jQuery插件:
当您专注于消息字段时,它不允许您使用任何空格.关于为什么空格键不起作用的任何想法?
我正在使用WP_Query在wordpress中循环自定义帖子类型.我的循环看起来像这样:
<div class="bigRedStrip">
<h2>Available Now!</h2>
</div>
<ul>
<?php $loop = new WP_Query( array( 'post_type' => 'films', 'post_child' => 0, 'posts_per_page' => 8,'orderby' => 'date', 'order' => 'ASC', 'film-categories' => 'blu-ray' ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li>
loop stuff here
</li>
<?php endwhile; ?>
</ul>
Run Code Online (Sandbox Code Playgroud)
如您所见,在循环之前有一个标题,显示"立即可用!".我想重新格式化循环,所以如果没有返回的帖子,那么将不会显示包含标题(div类bigRedStrip)的div.我已经尝试了许多潜在的解决方案,但我遇到的问题是,所有这些"解决方案"都需要将<div class="bigRedStrip">内部循环,这导致每个返回的帖子重复标题.这个想法是让标题只显示一次.我有什么想法可以做到这一点?
我在http://www.happyholidaylites.com/contact.html上有一个非常基本的表格,它运作良好.当您提交表单时,用户将被带到index.html,而不会发送表单已发送的消息.我希望通过x按钮发出一条提示"已提交表单"的提醒.我的代码看起来像这样:
<form method="post" id="myForm" action="dynaform.php">
<input type='hidden' name='rec_mailto' value='JBIRD1111@gmail.com'>
<input type='hidden' name='rec_subject' value='New Contact Form'>
<input type='hidden' name='rec_thanks' value='index.html'>
Run Code Online (Sandbox Code Playgroud)
等等等等.....
最后一行是告诉表单在按下提交按钮后要做什么,但我不希望它将浏览器指向索引,而是我想要一个带有成功消息的javascript弹出窗口.有任何想法吗?
我有一个链接到另一个页面的锚链接.单击它时,默认情况下会转到下一页的顶部.我想把它带到页面的某个位置.我该怎么做(使用jQuery幻灯片效果或普通的HTML)?
例如,当单击.sample a时,我希望它将您带到链接页面的某个位置.
我设计了一个响应式布局,你可以在这里看到:http://pixelcakecreative.com/cimlife/responsive/
在宽度小于1550像素的显示器上查看时,存在一个小问题.我希望导航栏填满<nav>元素的整个宽度.
我的HTML设置如下:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contests</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Run Code Online (Sandbox Code Playgroud)
在我的CSS中,我给了每个<a>填充.填充是应根据页面宽度更改的变量,因此使用px将不起作用.我不能使用百分比,因为每个<li>都有不同的宽度(不同的文本量).是否有一个很好的解决方案(jquery或css)在整个宽度范围内展开导航栏<nav>?
附图是期望的效果
我使用以下css创建具有chckerboard背景的列表项(每个其他列表项具有灰色背景,每行移动以创建棋盘图案:
li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) {
background-color:grey;
}
Run Code Online (Sandbox Code Playgroud)
有没有办法可以使用比css3更支持的jquery来做到这一点?谢谢
我使用jQuery鼠标滚轮插件,允许浏览器左右上下滚动感知.代码很简单:
$('body').bind('mousewheel', function(event, delta) {
this.scrollLeft -= (delta * 5);
});
Run Code Online (Sandbox Code Playgroud)
您可以在水平滚动页面上测试此功能:http://jsfiddle.net/Ema2B/13/
这在chrome中效果很好.向下滚动向右滚动内容窗格.如果你把它带到firefox,它不起作用.我运行了一些测试,firefox确实看到了正确的delta值,但由于某种原因它不理解scrollLeft.我设置了一个简单的测试来验证这个:
$("a.logo").on("click", function(){
$(body).scrollLeft(300);
});
Run Code Online (Sandbox Code Playgroud)
同样,这在chrome中很有用,但不是firefox.为什么firefox不允许scrollLeft?
注意:溢出:为身体设置隐藏以禁用滚动条.测试chrome和firefox中的小提琴.