2012-03-06 2 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 сайт –

+1

имеют небольшое уважение при публикации кода .... все сценарии и теги ссылок бесполезны здесь и важная часть, на которую ссылается этот скрипт, html, не отображается – charlietfl

+1

@MildFuzz: Пожалуйста, не предлагайте, я уверен, что они не хотят этого сообщения в текущей форме. Я мог ошибаться, поэтому извиняюсь, если это подходящий материал для обзора кода. –

ответ

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, GALLERIA и т.д.) в единую библиотеки. js-файл. И, конечно, переместите вышеуказанный JS во внешний файл scripts.js.

Кроме того, вы дважды вызываете jquery и fancybox дважды, поэтому, вероятно, следует удалить один экземпляр каждого из них.

Я не уверен, сколько WordPress позволит вам оптимизировать, но сокращение количества файлов JS и CSS было бы выгодным. Лучшей практикой вам будет нужен вызов jquery, library.js и scripts.js, без каких-либо других JS (внешних или встроенных).

+0

приветствует ребята! Цените это большое время! –

+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

Смежные вопросы