Уменьшение кода javascript .... Динамический заголовок на статической странице с javascript

Question

Этот элемент загружает последнюю и с задержкой на странице ... Я создал динамический заголовок с внешним файлом javascript для моей статической html-страницы , Мне нужна помощь для похудения кода. Кроме того, для вызова функции я вызываю тело методом onLoad. Любые предложения о том, как вызвать эту функцию EXTERNAL до того, как ВСЕ содержимое страницы загрузится?

function addHeaders(){ 
var emptyHTML = document.getElementById("category_header").innerHTML; 
var addHTML = 
"<span>" + emptyHTML + "<a href='/broadcast_webcast/' class='catnav'>" + "Live  Broadcasts &amp; Webcasts" + "</a>" + "</span>" 
    + "<span>" + "<a href='/business/' class='catnav'>" + "Business" + "</a>" + "</span>" 
    + "<span>" + "<a href='/celebrities/' class='catnav'>" + "Celebrities" + "</a>" + "</span>" 
    + "<span>" + "<a href='/culture/' class='catnav'>" + "Culture" + "</a>" + "</span>" 
    + "<span>" + "<a href='/education/' class='catnav'>" + "Education" + "</a>" + "</span>" 
    + "<span>" + "<a href='/energy/' class='catnav'>" + "Energy" + "</a>" + "</span>" 
    + "<span>" + "<a href='/entertainment/' class='catnav'>" + "Entertainment" + "</a>" + "</span>" 
    + "<span>" + "<a href='/environment/' class='catnav'>" + "Environment" + "</a>" + "</span>" 
    + "<span>" + "<a href='/fashion/' class='catnav'>" + "Fashion" + "</a>" + "</span>" 
    + "<br>" 
    + "<span>" + "<a href='/health/' class='catnav'>" + "Health &amp; Fitness" + "</a>" + "</span>" 
    + "<span>" + "<a href='/humanitarian/' class='catnav'>" + "Humanitarian" + "</a>" + "</span>" 
    + "<span>" + "<a href='/movies/' class='catnav'>" + "Movies" + "</a>" + "</span>" 
    + "<span>" + "<a href='/music/' class='catnav'>" + "Music" + "</a>" + "</span>" 
    + "<span>" + "<a href='/hollywood/' class='catnav'>" + "Hollywood" + "</a>" + "</span>" 

    + "<span>" + "<a href='/newyork/' class='catnav'>" + "New York City" + "</a>" + "</span>" 
    + "<span>" + "<a href='/scienceandtech/' class='catnav'>" + "Science &amp; Technology" + "</a>" + "</span>" 
    + "<span>" + "<a href='/sports/' class='catnav'>" + "Sports" + "</a>" + "</span>" 
    + "<span>" + "<a href='/videogames/' class='catnav'>"+ "Video Games" + "</a>" + "</span>" 

document.getElementById("category_header").innerHTML = addHTML; 

var getNav = document.getElementById("navtop").innerHTML; 
var createNav = 
"<span class='navtop'>" + getNav + "<a href='../' class='navtop'>" + "Home" + "</a>" + "</span>" 
+ "<span class='navtop'>" + "<a href='/contact-us' class='navtop'>" + "Contact Us" + "</a>" + "</span>" 
+ "<span class='navtop'>" + "<a href='/our-expertise' class='navtop'>" + "Our Expertise" + "</a>" + "</span>" 
+ "<span class='navtop'>" + "<a href='/worldwide-studios-offices/' class='navtop'>" + "Bader TV Worldwide Studios &amp; Offices" + "</a>" + "</span>" 
+ "<span class='navtop'>" + "<a href='/careers' class='navtop'>" + "Careers" + "</a>" + "</span>" 
+ "<span class='navtop'>" + "<a href='/urgent-video-requests' class='navtop'>" + "Urgent video Requests" + "</a>" + "</span>" 

document.getElementById("navtop").innerHTML = createNav; 

}

ссылка: [badertv.com]

Answer 1

В обоих addHTML и createNav у вас есть только одна динамическая переменная. Почему конкатенация?

Дополнение: Вы можете просто поместить все это в функцию и вызвать ее после того, как вы закроете родительский тег для элемента, который будет содержать контент (вы можете установить две функции, если две строки не для одного и того же контейнер).

Answer 2

Шаг 1: Снизить Тиражирование (сделать функцию, которая делает пролет и еще теги дают URL и текст

Шаг 2:. Используйте массив и петля для URL и текст

function makeLink(url, text){ 
    return "<span><a href='"+url+"' class='catnav'>"+text+"</a></span>"; 
} 
var url = ['/business/','/celebrities/',...]; 
var text = ['Business','Celebrities',...]; 
var out = ''; 
for(var i = 0; i < url.length; i++){ 
    out += makeLink(url[i],text[i]); 
} 

. добавьте любые особые случаи, и вы все настроены.

Answer 3

Похудение вниз Я думаю, это может походить на это, это избавит вас от нескольких байтов, но мне интересно, стоит ли этого делать. Для части загрузки: body onload безопасен, потому что он, вероятно, гарантирует, что getElementbyId будет работать , Если вы поместите тег сценария в конец тега </body>, он может работать, но в другом браузере поведение может быть другим (ака сломанным).

function link(linkText) { 
    return "<span><a href='/" + linkText[0] + "/' class='catnav'>" + linkText[1] + "</a></span>"; 
} 

function addHeaders(){ 
var emptyHTML = document.getElementById("category_header").innerHTML, 
    linkTexts = [ 
["broadcast_webcast", "Live Broadcasts &amp; Webcasts"], 
["business", "Business"] 
// etc 
], 
addHtml; 

addHtml = new []; 
for (i=0;i<linkTexts.length;i += 1) { 
    addHtml.push(link(linkTexts[i])); 
} 

document.getElementById("category_header").innerHTML = addHtml.join(""); 

// rest of the code 
}