Загрузить HTML-объект один раз и использовать несколько раз

Я пытаюсь загрузить один SVG-файл в виде тега HTML-объекта несколько раз, и я использую JavaScript для написания HTML, отвечающего за размещение объектов. Однако каждый раз, когда JavaScript записывает на страницу, объект загружает отдельную копию.Загрузить HTML-объект один раз и использовать несколько раз

Есть ли способ загрузить его один раз и затем ссылаться на эту копию несколько раз?

Вот пример того, что я делаю (предположим, что в JavaScript вызывается после того, как был загружен отд.):

(function(){ 
 
    var foo = document.getElementById("foo"); 
 
    var numberOfElements = 10; 
 
    for(var i = 0; i < numberOfElements; i++){ 
 
    foo.innerHTML += 
 
      "<object height=\"10px\" width=\"10px\" data=\"someSVG.svg\"></object>"; 
 
    } 
 
}())

<html> 
 
    <head> 
 
    <title>Title</title> 
 
    </head> 
 
    <body> 
 
    <div id="foo"> 
 
    </div> 
 
    </body> 
 
</html>

источник

2015-02-22 Steven Fontaine

Вы могли бы показать нам код. –

@RobertMoskal Обязательно. –

Это обычное поведение браузера - я думаю. Ваш «foo.innerHTML» сообщает браузеру: что-то в DOM изменилось. Пожалуйста, подтвердите, отправьте ссылку и отправьте ее немедленно. В вашем случае ... 10 раз. – dsuess

Просто добавьте весь наш HTML-код в один раз. В противном случае вы укажете браузер 10 раз, в DOM будут внесены изменения, и он начнет проверять, ссылаться и выдавать его мгновенно. Надеюсь, это будет использовать файловый кэш браузеров для «someSVG.svg»

(function() { 
 
    var foo = document.getElementById("foo"); 
 
    var numberOfElements = 10; 
 
    var content = ""; // temporary string, starting empty 
 
    for (var i = 0; i < numberOfElements; i++) { 
 
    content += 
 
     '<object height="10px" width="10px" data="http://www.webmasterpro.de/coding/article/svg.html/image/600px-SVG-Logo2.svg.png/scale/100x150/"></object>'; 
 
    } 
 
    foo.innerHTML += content; // append once, outside of loop 
 
}())

<div id="foo"></div>

источник

2015-02-22 23:14:35 dsuess

Я пробовал это и, к сожалению, это не сработало. :/ –

Хорошо. Я обновил его, и теперь он начинается с пустой строки. В предыдущей версии была объединена переменная 'undefined' с строками ''. Теперь, с помощью HTML-фрагмента, приведенная выше демонстрация кода. – dsuess

Думаю, я должен быть более конкретным. Я действительно поймал эту ошибку и правильно реализовал ваш код. Он по-прежнему загружал объекты отдельно все 10 раз. –

Это, кажется, происходит из-за элемента. Если вы переключитесь на a, который также может обрабатывать SVG. Он работает как шарм и использует кешированный src.

Можете?

foo.innerHTML += '<img height="10px" width="10px" src="http://upload.wikimedia.org/wikipedia/en/2/24/WWF_logo.svg"/>'

Смотрите этот фрагмент:

(function() { 
 
    var foo = document.getElementById("foo"); 
 
    var numberOfElements = 10; 
 
    var content = ""; // temporary string, starting empty 
 
    content += 
 
    '<img height="10px" width="10px" src="http://upload.wikimedia.org/wikipedia/en/2/24/WWF_logo.svg"/>'; 
 
    foo.innerHTML += content; // append once, outside of loop 
 
    var element = document.querySelector('#foo img'); 
 
    for (var i = 0; i < numberOfElements; i++) { 
 
    foo.appendChild(element.cloneNode(true)); 
 
    } 
 
}())

<div id="foo"></div>

источник

2015-02-23 20:16:43 dsuess

Загрузить HTML-объект один раз и использовать несколько раз

ответ

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