2012-03-06 95 views
-1

基本上,我想要做的就是让这个更清洁一点,以便页面加载更快,有没有办法做到这一点?我可以让这个jQuery更短吗?

我的头代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en-US"> 
<head profile="http://gmpg.org/xfn/11"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Steve A Tattoo Artist</title> 
<link rel="stylesheet" href="http://www.steveatattooartist.com/wp-content/themes/blue-and-grey/style.css" type="text/css" media="screen" /> 
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type="text/css"> 
<!--[if lt ie 8]><link rel="stylesheet" href="http://www.steveatattooartist.com/wp-content/themes/blue-and-grey/styles/ie7.css" type="text/css" /><![endif]--> 
<!--[if lt ie 7]><link rel="stylesheet" href="http://www.steveatattooartist.com/wp-content/themes/blue-and-grey/styles/ie6.css" type="text/css" /><![endif]--> 
<link rel="pingback" href="http://www.steveatattooartist.com/xmlrpc.php" /> 

<!--DEMO CSS LINKS--> 
<link href="http:/www.steveatattooartist.com/wp-content/themes/blue-and-grey/demo.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> 

<!--FANCY BOX REFS--> 
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script> 
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 

<!--GALLERIA--> 
<script src="/galleria/galleria-1.2.6.min.js"></script> 
<script src="/galleria/themes/classic/galleria.classic.min.js"></script> 
<script>Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js');</script> 

<!--FANCY BOX JAVA--> 
<script> 
jQuery(document).ready(function() { 
/* This is basic - uses default settings */ 
$("a#single_image").fancybox(); 

/* Using custom settings */ 
$("a#inline").fancybox({ 
    'hideOnContentClick': true 
}); 

/* Apply fancybox to multiple items */ 
$("a.group").fancybox({ 
    'transitionIn' : 'elastic', 
    'transitionOut' : 'elastic', 
    'speedIn'  : 600, 
    'speedOut'  : 200, 
    'overlayShow' : false 
}); 
}); 
</script> 

<!--STEVE A DIV--> 

<script> 
jQuery(document).ready(function() { 
$("#firstpagename, #firstpagename2").click(function() { 
$("div#white").toggle(); 
$("div#v2black, div#v3black").hide(); 
}); 

$("#secondpagename, #secondpagename2").click(function() { 
$("div#v2black").toggle(); 
$("div#white, #v3black").hide(); 
}); 

$("#thirdpagename, #thirdpagename2").click(function() { 
$("div#v3black").toggle(); 
$("div#white, #v2black").hide(); 
}); 

$(".toggle").click(function(){ 
     $(".toggle").hide(); 
     $(this).toggle(); 
}); 

}); 
<!--MAIN TOP NAV SCROLLING--> 

$(window).scroll(function() { 
    if ($(this).scrollTop() >= 591) { 
     $(".altstevenav:hidden").show(); 
    } 
    else { 
     $(".altstevenav:visible").hide(); 
    } 
}); 

$(window).scroll(function() { 
    if ($(this).scrollTop() >= 591) { 
     $(".topwhiteborder:hidden").show(); 
    } 
    else { 
     $(".topwhiteborder:visible").hide(); 
    } 
}); 
</script> 
<!--END OF DEMO CSS LINKS--> 

<link rel="alternate" type="application/rss+xml" title="Steve A Tattoo Artist &raquo; Feed" href="http://www.steveatattooartist.com/?feed=rss2" /> 
<link rel="alternate" type="application/rss+xml" title="Steve A Tattoo Artist &raquo; Comments Feed" href="http://www.steveatattooartist.com/?feed=comments-rss2" /> 
<link rel='stylesheet' id='jquery.fancybox-css' href='http://www.steveatattooartist.com/wp-content/plugins/fancy-box/jquery.fancybox.css?ver=1.2.6' type='text/css' media='all' /> 
<script type='text/javascript' src='http://www.steveatattooartist.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script> 
<script type='text/javascript' src='http://www.steveatattooartist.com/wp-content/plugins/fancy-box/jquery.fancybox.js?ver=1.2.6'></script> 
<script type='text/javascript' src='http://www.steveatattooartist.com/wp-content/plugins/fancy-box/jquery.easing.js?ver=1.3'></script> 
<script type='text/javascript' src='http://www.steveatattooartist.com/wp-includes/js/comment-reply.js?ver=20090102'></script> 
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.steveatattooartist.com/xmlrpc.php?rsd" /> 
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.steveatattooartist.com/wp-includes/wlwmanifest.xml" /> 

<meta name="generator" content="WordPress 3.3.1" /> 
<link rel='canonical' href='http://www.steveatattooartist.com/' /> 
<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]'); 
     select.attr('rel', 'fancybox'); 
     select.fancybox(); 
    }); 
</script> 
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style> 

我想这是不是整齐,因为它应该而且可以收拾!任何帮助表示赞赏...

+5

属于代码评论SE网站 – 2012-03-06 15:31:30

+1

在发布代码时有一点尊重....所有的脚本和链接标签在这里都毫无价值,脚本引用的重要部分html不会显示 – charlietfl 2012-03-06 15:34:28

+1

@MildFuzz:请不要暗示,我确定他们不希望这篇文章是现在的形式。我可能是错的,非常抱歉,如果这是Code Review的适当材料。 – 2012-03-06 15:42:03

回答

2

你可以把你所有的JS到一个单一的脚本:

<script type="text/javascript"> 
Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js'); 

jQuery(document).ready(function() { 
    /* This is basic - uses default settings */ 
    $("a#single_image").fancybox(); 

    /* Using custom settings */ 
    $("a#inline").fancybox({ 
    'hideOnContentClick': true 
    }); 

    /* Apply fancybox to multiple items */ 
    $("a.group").fancybox({ 
    'transitionIn' : 'elastic', 
    'transitionOut' : 'elastic', 
    'speedIn'  : 600, 
    'speedOut'  : 200, 
    'overlayShow' : false 
    }); 

    // STEVE A DIV 
    $("#firstpagename, #firstpagename2").click(function() { 
    $("div#white").toggle(); 
    $("div#v2black, div#v3black").hide(); 
    }); 

    $("#secondpagename, #secondpagename2").click(function() { 
    $("div#v2black").toggle(); 
    $("div#white, #v3black").hide(); 
    }); 

    $("#thirdpagename, #thirdpagename2").click(function() { 
    $("div#v3black").toggle(); 
    $("div#white, #v2black").hide(); 
    }); 

    $(".toggle").click(function(){ 
    $(".toggle").hide(); 
    $(this).toggle(); 
    }); 


    // MAIN TOP NAV SCROLLING 

    $(window).scroll(function() { 
    if ($(this).scrollTop() >= 591) { 
     $(".altstevenav:hidden, .topwhiteborder:hidden").show(); 
    } 
    else { 
     $(".altstevenav:visible, .topwhiteborder:visible").hide(); 
    } 
    }); 

    var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]'); 
    select.attr('rel', 'fancybox'); 
    select.fancybox(); 
}); 

</script> 

您也可以将您所有的JS库(的fancybox,广场等)组合成一个单一的库。 js文件。当然,将上面的JS移动到外部scripts.js文件中。

此外,你调用jquery两次,fancybox两次,所以应该删除每个的一个实例。

我不确定多少WordPress可以让你优化,但减少JS和CSS文件的数量将是有益的。最佳做法是,您需要调用jquery,libraries.js和scripts.js,而不需要其他JS(外部或内联)。

+0

欢呼家伙!欣赏它大时间! – 2012-03-06 15:57:38

+0

但如果我更改var select = jQuery('img [src $ =“。bmp”],img [src $ =“。gif”],img [src $ =“。jpg”],img [src $ = “JPEG ”],IMG [SRC $ =“ PNG ”],IMG [SRC $ =“ BMP ”],IMG [SRC $ =“。GIF ”],IMG [SRC $ =“ JPG”] ,IMG [SRC $ = “JPEG ”],IMG [SRC $ =“ PNG”]'); \t \t select.attr('rel','fancybox'); \t \t select.fancybox(); – Thoman 2012-04-18 09:44:51