2012-03-06 100 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