jQuery的脚本运行速度很慢 [英] jQuery scripts runs very slow
本文介绍了jQuery的脚本运行速度很慢的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个很大的问题。我创建的网站，使用jQuery，但它运行速度非常慢。在手机上这是可怕的！我不知道，什么是错的......有人能帮助我吗？
链接不工作还没有，因为我想用CMS上这种布局，但在此之前我想有点优化这些脚本。
下面的测试场地：
http://wm.pawelgorastudio.pl
和这里的脚本：
＆LT;脚本类型=文/ JavaScript的SRC =JS / CSS3-mediaqueries.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / picturefill.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jQuery的-1.9.0.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jquery.color.plus-名-2.1.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jquery.cookie.js＆GT;＆LT; / SCRIPT＆GT;＆LT;！ - 弹出Magnific酒店核心JS文件 - ＆GT;
＆LT;脚本SRC =JS / jquery.magnific-popup.min.js＆GT;＆LT; / SCRIPT＆GT;＆所述;！ - jQuery的carouFredSel JS文件 - ＆GT;
＆LT;脚本SRC =JS / jquery.carouFredSel-6.2.1-packed.js＆GT;＆LT; / SCRIPT＆GT;＆LT; - 的Adobe TypeKit字体 - HTTPS：//typekit.com-->
＆LT;脚本类型=文/ JavaScript的SRC =// use.typekit.net/eiz5mrm.js\"></script>
＆LT;脚本类型=文/ JavaScript的＆GT;尝试{Typekit.load（）;}赶上（E）{}＆LT; / SCRIPT＆GT;＆LT;！ - preloader - ＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（窗口）.load（函数（）{
$（preloader。）的延迟（100）.fadeOut（1000）。
}）
＆LT; / SCRIPT＆GT;＆LT;！ - 图片查看器 - ＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（图像链接。）magnificPopup（{类型：'形象'}）;
}）;
＆LT; / SCRIPT＆GT;＆LT;！ - 所有的div链接引擎的Internet Explorer - ＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（。mainmenu1一，.mainmenu2一，.rowclients一）。点击（函数（事件）{
。事件preventDefault（）; window.location的= $（本）.attr（HREF）;
}）;
}）;
＆LT; / SCRIPT＆GT;＆LT;！ - 顶部菜单链接悬停动画 - ＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（。topmenu2 .topContact一个）。悬停（
功能（）{
$（本）.stop（）动画（{颜色：＃B2B2B2}，250）;
}，
功能（）{
$（本）.stop（）动画（{颜色：＃666666}，250）;
}
）;
}）;
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（。topmenu2 #ENDesk一个，.topmenu2 #ENMobile一个）。悬停（
功能（）{
$（本）.stop（）动画（{颜色：＃FF6400}，250）;
}，
功能（）{
$（本）.stop（）动画（{颜色：#CCCCCC}，250）;
}
）;
}）;
＆LT; / SCRIPT＆GT;＆LT;！ - 主菜单链接动画 - ＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数动漫（）{
的setInterval（函数（）{
$（。A1b的）延迟（0）.animate（{不透明度：1}，500，摆动）;
$（。A1b的），动画（{不透明：0}，1000，摇摆）;
$（。A3B）延迟（250）.animate（{不透明度：1}，500，摆动）;。
$（。A3B），动画（{不透明：0}，1000，摇摆）;
$（。A4B）延迟（500）.animate（{不透明度：1}，500，摆动）;。
$（。A4B），动画（{不透明：0}，1000，摇摆）;
$（。A6B）延迟（750）.animate（{不透明度：1}，500，摆动）;。
$（。A6B），动画（{不透明：0}，1000，摇摆）;
$（。A8b）延迟（1000）.animate（{不透明度：1}，500，摆动）;。
$（。A8b），动画（{不透明：0}，1000，摇摆）;
$（。A9b）延迟（1250）.animate（{不透明度：1}，500，摆动）;。
$（。A9b），动画（{不透明：0}，1000，摇摆）;
$（动漫2img）延迟（1500）.animate（{左：195px，上面：100像素}，700，摇摆）。
$（动漫5img）延迟（1500）.animate（{左：181px，上面：97px}，700，摇摆）。
$（动漫7img）延迟（1500）.animate（{左：1px的顶7px的}，700，摇摆）。
$（动漫3img）延迟（1600）.animate（{左：80px}，500，摇摆）;
$（动漫3txt）延迟（1600）.animate（{左：80px}，500，摇摆）;
$（动漫4img）延迟（1600）.animate（{顶：30PX}，500，摇摆）;
$（动漫4txt）延迟（1600）.animate（{顶：30PX}，500，摇摆）;
$（。A1b的）延迟（3000）.animate（{不透明度：1}，500，摆动）;。
$（。A1b的），动画（{不透明：0}，1000，摇摆）;
$（。A3B），延时（3250）.animate（{不透明：1}，500，摇摆）。
$（。A3B），动画（{不透明：0}，1000，摇摆）;
$（。A4B），延时（3500）.animate（{不透明：1}，500，摇摆）。
$（。A4B），动画（{不透明：0}，1000，摇摆）;
$（。A6B），延时（3750）.animate（{不透明：1}，500，摇摆）。
$（。A6B），动画（{不透明：0}，1000，摇摆）;
$（。A8b）延迟（4000）.animate（{不透明度：1}，500，摆动）;。
$（。A8b），动画（{不透明：0}，1000，摇摆）;
$（。A9b），延时（4250）.animate（{不透明：1}，500，摇摆）。
$（。A9b），动画（{不透明：0}，1000，摇摆）;
$（动漫2img），延时（4500）.animate（{左：51px，上面：12px的}，700，摇摆）;
$（动漫5img）延迟（4500）.animate（{左：1px的顶7px的}，700，摇摆）。
$（动漫7img）延迟（4500）.animate（{左：181px，上面：97px}，700，摇摆）。
$（动漫3img）延迟（4600）.animate（{左：100像素}，500，摇摆）。
$（动漫3txt）延迟（4600）.animate（{左：100像素}，500，摇摆）。
$（动漫4img）延迟（4600）.animate（{顶：43px}，500，摇摆）;
$（动漫4txt）延迟（4600）.animate（{顶：43px}，500，摇摆）;
}，10000）;
}）;
＆LT; / SCRIPT＆GT;＆LT;！ - 社会联系悬停动画和链接的Internet Explorer引擎 - ＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（。菌素B1a）。悬停（
功能（）{
$（本）.stop（）动画（{不透明：0}，500）;
}，
功能（）{
$（本）.stop（）动画（{不透明：1}，500）;
} ）;
$（。fadehover一）。点击（函数（事件）{
。事件preventDefault（）; window.open（$（本）.attr（HREF））;
}）;
}）;
＆LT; / SCRIPT＆GT;＆LT;！ - 子链接悬停移动菜单的动画和发动机 - ＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（子菜单＃MobileMenu。）淡出（0）。
}）;
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（＃EnterMenu）。悬停（
功能（）{
$（＃子移动P），停止（）动画（{颜色：#FFFFFF}，250）;
$（M1a的。），停止（）动画（{不透明：0}，250）。;
}，
功能（）{
$（＃子移动P），停止（）动画（{色：＃333333}，250）;
$（M1a的。），停止（）动画（{不透明：1}，250）。;
}
）;
$（＃EnterMenu）。点击（函数（事件）{
。事件preventDefault（）;
$（子菜单＃MobileMenu。）淡入（250）。
$（'＃子MobileMenu .submenuList一个'）。每个（函数（一）{
变种利润率= 25 - （$（本）.height（）/ 2）+像素;
$（本）的.css（{的margin-top：利润，保证金底：利润}）;
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的'＆GT;
$（窗口）.load（函数（）{
$（'＃子DeskMenu .submenuList'）。每个（函数（一）{
变种利润率= 25 - （$（本）.height（）/ 2）+像素;
$（本）的.css（{的margin-top：利润，保证金底：利润}）;
}）;
}）;
$（窗口）.resize（函数（）{
$（'＃子DeskMenu .submenuList，.submenu＃MobileMenu .submenuList一个'）。每个（函数（一）{
变种利润率= 25 - （$（本）.height（）/ 2）+像素;
$（本）的.css（{的margin-top：利润，保证金底：利润}）;
}）;
}）;
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（子菜单）。悬停（
功能（）{
$（本）.stop（）动画（{颜色：#FFFFFF}，250）;
}，
功能（）{
$（本）.stop（）动画（{色：＃333333}，250）;
}
）;
}）;
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（。submenuList P）。悬停（
功能（）{
$（本）.stop（）动画（{颜色：#FFFFFF}，250）;
}，
功能（）{
$（本）.stop（）动画（{色：＃333333}，250）;
}
）;
}）;
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（＃CloseMenu）。悬停（
功能（）{
$（＃关闭P），停止（）动画（{颜色：#FFFFFF}，250）。;
$（庆大霉素C1a）停止（）动画（{不透明：0}，250）。;
}，
功能（）{
$（＃关闭P），停止（）动画（{色：＃333333}，250）。;
$（庆大霉素C1a）停止（）动画（{不透明：1}，250）。;
}
）;
$（＃CloseMenu）。点击（函数（事件）{
。事件preventDefault（）;
$（子菜单＃MobileMenu。）淡出（250）。
}）;
}）;
＆LT; / SCRIPT＆GT;＆LT;！ - 客户端列表动画 - ＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（窗口）.load（函数（）{
$（'。clientsImg'）。每个（函数（一）{
VAR的客户= $（'。clientsImg'）;
VAR指数= clients.index（本）;
VAR下一=客户[索引+ 1];
VAR preV =客户[索引1];
$（本）的.css（顶，27 - （$（本）.height（）/ 2）+PX）;
如果（我== 0）{
$（本）的.css（左，0）;
}
其他{
$（本）的.css（左，$（preV）.WIDTH（）+ $（preV）.POSITION（）左+ 40 +PX）;
}
window.TotalWidth = 0;
$（'。clientsList'）。找到（'。clientsImg'）。每个（函数（）{
window.TotalWidth + = $（本）.WIDTH（）+ 40;
}）;
$（'。clientsList'）宽度（TotalWidth）。
}）;
（函数飞（）{
$（'。clientsImg'）动画（{左： - = 1px的}，10日，线性，函数（）{
如果（$（本）.POSITION（）左＆LT; = 0 - $（本）.WIDTH（））{
$（本）的CSS（左，+ =+ TotalWidth +像素）;
}
飞（）;
}）;
}（））;
}）;
＆LT; / SCRIPT＆GT;＆LT;！ - 页脚列表悬停动画 - ＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（。rowfooter一个）。悬停（
功能（）{
$（本）.stop（）动画（{颜色：＃4C4C4C}，250）;
}，
功能（）{
$（本）.stop（）动画（{颜色：＃999999}，250）;
}
）;
}）;
＆LT; / SCRIPT＆GT;＆LT;！ - 显示饼干信息框中的动画引擎，并设置和读取发动机饼干 - ＆GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（窗口）.load（函数（）{
。变种cookieHeight = - + $（。cookiesInfo）的高度（）+像素;
$（cookiesInfo。），CSS（{不透明：0，下：cookieHeight}）。
如果（$ .cookie（cookieBox）！= 1）{
。变种cookieHeight = - + $（。cookiesInfo）的高度（）+像素;
$（。cookiesInfo），延时（1100）.animate（{不透明：1，底部：0}，1000，摇摆）;
}
}）
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
$（。C2A）。悬停（
功能（）{
$（本）.stop（）动画（{不透明：0}，500）;
}，
功能（）{
$（本）.stop（）动画（{不透明：1}，500）;
}
）;
$（。closecookiesInfo一）。点击（函数（事件）{
。事件preventDefault（）;
$ .cookie（cookieBox，1）;
。变种cookieHeight = - + $（。cookiesInfo）的高度（）+像素;
$（。cookiesInfo），动画（{不透明：0，下：cookieHeight}，1000，摇摆）;
}）;
}）;
＆LT; / SCRIPT＆GT;
解决方案
与iPhone的3G / s的，你必须考虑到他们的电源是很慢比较新的车型，如果你有时间的这篇文章它的话题一些固体分，和JavaScript被间preTED慢..
即使寿它是小仅 64的请求和 252KB 转移，仍然对表现不佳的网站手机所以我觉得它的唯一的事情就是COM preSS文件，把他们放在一起，通过使用带有文本或CSS的精灵的。因此请求较小也是这并不重要性能速度明智的，但它是真的好来处理移动设备的事件，尽量避免使用点击如果你知道该设备是移动或具有触控功能。您可以使用 jQuery Mobile的或 JQT 来处理这个事件，例如按或双击。
此外，避免使用多个
$（文件）。就绪（函数（）{}）;
和
的$（document）.load（函数（）{}）;
您可以检查<一href=\"http://stackoverflow.com/questions/1327756/can-you-have-multiple-document-readyfunction-sections\">this回答以供参考。
I have a big problem. I've created site, using jQuery, but it runs very slowly. On mobile phones it's terrible! And I don't know, what's wrong... Someone can help me?
Links doesn't works yet, because I want use CMS on this layout, but before I want to little optimise these scripts.
Here's test site: http://wm.pawelgorastudio.pl
And here are the scripts:
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="js/picturefill.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.color.plus-names-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- jQuery carouFredSel JS file -->
<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
<!--Adobe TypeKit fonts - https://typekit.com-->
<script type="text/javascript" src="//use.typekit.net/eiz5mrm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- Preloader -->
<script type='text/javascript'>
$(window).load(function() {
$(".preloader").delay(100).fadeOut(1000);
})
</script>
<!-- Image viewer -->
<script type='text/javascript'>
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
</script>
<!-- All div links engine for Internet Explorer -->
<script type='text/javascript'>
$(document).ready(function(){
$(".mainmenu1 a, .mainmenu2 a, .rowclients a").click(function(event) {
event.preventDefault(); window.location = $(this).attr("href");
});
});
</script>
<!-- Top menu links hover animation -->
<script type='text/javascript'>
$(document).ready(function(){
$(".topmenu2 .topContact a").hover(
function() {
$(this).stop().animate({"color": "#B2B2B2"}, 250);
},
function() {
$(this).stop().animate({"color": "#666666"}, 250);
}
);
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".topmenu2 #ENDesk a, .topmenu2 #ENMobile a").hover(
function() {
$(this).stop().animate({"color": "#FF6400"}, 250);
},
function() {
$(this).stop().animate({"color": "#CCCCCC"}, 250);
}
);
});
</script>
<!-- Main menu links animation -->
<script type='text/javascript'>
$(document).ready(function anime(){
setInterval(function(){
$(".A1b").delay(0).animate({"opacity": "1"}, 500, "swing");
$(".A1b").animate({"opacity": "0"}, 1000, "swing");
$(".A3b").delay(250).animate({"opacity": "1"}, 500, "swing");
$(".A3b").animate({"opacity": "0"}, 1000, "swing");
$(".A4b").delay(500).animate({"opacity": "1"}, 500, "swing");
$(".A4b").animate({"opacity": "0"}, 1000, "swing");
$(".A6b").delay(750).animate({"opacity": "1"}, 500, "swing");
$(".A6b").animate({"opacity": "0"}, 1000, "swing");
$(".A8b").delay(1000).animate({"opacity": "1"}, 500, "swing");
$(".A8b").animate({"opacity": "0"}, 1000, "swing");
$(".A9b").delay(1250).animate({"opacity": "1"}, 500, "swing");
$(".A9b").animate({"opacity": "0"}, 1000, "swing");
$(".anime-2img").delay(1500).animate({left: "195px", top: "100px"}, 700, "swing");
$(".anime-5img").delay(1500).animate({left: "181px", top: "97px"}, 700, "swing");
$(".anime-7img").delay(1500).animate({left: "1px", top: "7px"}, 700, "swing");
$(".anime-3img").delay(1600).animate({left: "80px"}, 500, "swing");
$(".anime-3txt").delay(1600).animate({left: "80px"}, 500, "swing");
$(".anime-4img").delay(1600).animate({top: "30px"}, 500, "swing");
$(".anime-4txt").delay(1600).animate({top: "30px"}, 500, "swing");
$(".A1b").delay(3000).animate({"opacity": "1"}, 500, "swing");
$(".A1b").animate({"opacity": "0"}, 1000, "swing");
$(".A3b").delay(3250).animate({"opacity": "1"}, 500, "swing");
$(".A3b").animate({"opacity": "0"}, 1000, "swing");
$(".A4b").delay(3500).animate({"opacity": "1"}, 500, "swing");
$(".A4b").animate({"opacity": "0"}, 1000, "swing");
$(".A6b").delay(3750).animate({"opacity": "1"}, 500, "swing");
$(".A6b").animate({"opacity": "0"}, 1000, "swing");
$(".A8b").delay(4000).animate({"opacity": "1"}, 500, "swing");
$(".A8b").animate({"opacity": "0"}, 1000, "swing");
$(".A9b").delay(4250).animate({"opacity": "1"}, 500, "swing");
$(".A9b").animate({"opacity": "0"}, 1000, "swing");
$(".anime-2img").delay(4500).animate({left: "51px", top: "12px"}, 700, "swing");
$(".anime-5img").delay(4500).animate({left: "1px", top: "7px"}, 700, "swing");
$(".anime-7img").delay(4500).animate({left: "181px", top: "97px"}, 700, "swing");
$(".anime-3img").delay(4600).animate({left: "100px"}, 500, "swing");
$(".anime-3txt").delay(4600).animate({left: "100px"}, 500, "swing");
$(".anime-4img").delay(4600).animate({top: "43px"}, 500, "swing");
$(".anime-4txt").delay(4600).animate({top: "43px"}, 500, "swing");
}, 10000);
});
</script>
<!-- Social links hover animation and links engine for Internet Explorer -->
<script type='text/javascript'>
$(document).ready(function(){
$(".B1a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, 500);
},
function() {
$(this).stop().animate({"opacity": "1"}, 500);
}
);
$(".fadehover a").click(function(event) {
event.preventDefault(); window.open($(this).attr("href"));
});
});
</script>
<!-- Submenu links hover animation and engine for mobile menu -->
<script type='text/javascript'>
$(document).ready(function(){
$(".submenu#MobileMenu").fadeOut(0);
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#EnterMenu").hover(
function() {
$(".submenu#Mobile p").stop().animate({"color": "#FFFFFF"}, 250);
$(".M1a").stop().animate({"opacity": "0"}, 250);
},
function() {
$(".submenu#Mobile p").stop().animate({"color": "#333333"}, 250);
$(".M1a").stop().animate({"opacity": "1"}, 250);
}
);
$("#EnterMenu").click(function(event) {
event.preventDefault();
$(".submenu#MobileMenu").fadeIn(250);
$('.submenu#MobileMenu .submenuList a').each(function(i) {
var margins = 25 - ($(this).height()/2) + "px";
$(this).css({"margin-top": margins, "margin-bottom": margins});
});
});
});
</script>
<script type='text/javascript'>
$(window).load(function() {
$('.submenu#DeskMenu .submenuList').each(function(i) {
var margins = 25 - ($(this).height()/2) + "px";
$(this).css({"margin-top": margins, "margin-bottom": margins});
});
});
$(window).resize(function() {
$('.submenu#DeskMenu .submenuList, .submenu#MobileMenu .submenuList a').each(function(i) {
var margins = 25 - ($(this).height()/2) + "px";
$(this).css({"margin-top": margins, "margin-bottom": margins});
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".submenu a").hover(
function() {
$(this).stop().animate({"color": "#FFFFFF"}, 250);
},
function() {
$(this).stop().animate({"color": "#333333"}, 250);
}
);
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".submenuList p").hover(
function() {
$(this).stop().animate({"color": "#FFFFFF"}, 250);
},
function() {
$(this).stop().animate({"color": "#333333"}, 250);
}
);
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#CloseMenu").hover(
function() {
$("#Close p").stop().animate({"color": "#FFFFFF"}, 250);
$(".C1a").stop().animate({"opacity": "0"}, 250);
},
function() {
$("#Close p").stop().animate({"color": "#333333"}, 250);
$(".C1a").stop().animate({"opacity": "1"}, 250);
}
);
$("#CloseMenu").click(function(event) {
event.preventDefault();
$(".submenu#MobileMenu").fadeOut(250);
});
});
</script>
<!-- Clients list animation -->
<script type='text/javascript'>
$(window).load(function() {
$('.clientsImg').each(function(i) {
var clients = $('.clientsImg');
var index = clients.index(this);
var next = clients[index+1];
var prev = clients[index-1];
$(this).css("top", 27 - ($(this).height()/2) + "px");
if (i == 0) {
$(this).css("left", 0);
}
else {
$(this).css("left", $(prev).width() + $(prev).position().left + 40 + "px");
}
window.TotalWidth = 0;
$('.clientsList').find('.clientsImg').each(function() {
window.TotalWidth += $(this).width() + 40;
});
$('.clientsList').width(TotalWidth);
});
(function fly() {
$('.clientsImg').animate({left: "-=1px"}, 10, "linear", function () {
if ($(this).position().left <= 0 - $(this).width()) {
$(this).css("left", "+=" + TotalWidth + "px");
}
fly();
});
}());
});
</script>
<!-- Footer list hover animation -->
<script type='text/javascript'>
$(document).ready(function(){
$(".rowfooter a").hover(
function() {
$(this).stop().animate({"color": "#4C4C4C"}, 250);
},
function() {
$(this).stop().animate({"color": "#999999"}, 250);
}
);
});
</script>
<!-- Cookies Info box animation engine for display it and set and read cookies engine -->
<script type='text/javascript'>
$(window).load(function() {
var cookieHeight = "-" + $(".cookiesInfo").height() + "px";
$(".cookiesInfo").css({opacity: 0, bottom: cookieHeight});
if ($.cookie("cookieBox") != 1) {
var cookieHeight = "-" + $(".cookiesInfo").height() + "px";
$(".cookiesInfo").delay(1100).animate({opacity: 1, bottom: 0}, 1000, "swing");
}
})
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".C2a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, 500);
},
function() {
$(this).stop().animate({"opacity": "1"}, 500);
}
);
$(".closecookiesInfo a").click(function(event) {
event.preventDefault();
$.cookie("cookieBox", 1);
var cookieHeight = "-" + $(".cookiesInfo").height() + "px";
$(".cookiesInfo").animate({opacity: 0, bottom: cookieHeight}, 1000, "swing");
});
});
</script>
解决方案
with iphone 3g / s you have to consider that they power it is really slow compare to new models and if you have time this article it has some solid points about the topic, and javascript gets interpreted slower..
even tho the site it is "small" only 64 request and 252kb of transfer and still perform poorly on mobiles so the only thing I think of it is to compress files putting it all together, reduce images either by using text with css or sprites. so the request is smaller also this is not important for performance speed wise but it is really good to handle events for mobile devices, try avoid using click if you know the device it is a mobile or it has touch capabilities. you can use jQuery mobile or JQT to handle this events such tap or double tap.
Also avoiding to use multiple:
$(document).ready(function() {
});
and
$(document).load(function() {
});
you can check this answer for reference.
这篇关于jQuery的脚本运行速度很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
