Question

基本上，我想做的就是让它更清洁，以便页面加载更快，有没有办法做到这一点？

我的头像代码如下：

<!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>

我认为这不像它应该的那样整洁，可以收拾整齐！任何帮助表示赞赏...

Answer 1

您可以将所有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，galleria等）合并到一个libraries.js文件中。当然，将上面的JS移到外部scripts.js文件中。

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

我不确定WordPress会允许您优化多少，但减少JS和CSS文件的数量将是有益的。最佳实践，您需要调用jquery，library.js和scripts.js，而不需要其他JS（外部或内联）。

我可以缩短这个jQuery吗？

1 个答案: