создайте дерево DOM из строки, не загружая ресурсы (конкретно изображения)

Question

создайте дерево DOM из строки, не загружая ресурсы (конкретно изображения)

Таким образом, я захватываю каналы RSS через Ajax. После обработки их у меня есть строка HTML, что я хочу управлять использующей различной функциональностью jQuery. Чтобы сделать это, мне нужно дерево узлов DOM.

Я могу проанализировать строку HTML в jQuery () функция.
Я могу добавить его как innerHTML к некоторому скрытому узлу и использованию это.
Я даже попытался использовать нестандартный range.createContextualFragment Mozilla ().

Проблема со всеми этими решениями - это, когда мой отрывок HTML имеет <img> тег, Firefox покорно выбирает любое изображение, ссылается. Так как эта обработка является фоновым материалом, который не отображается пользователю, я хотел бы просто получить дерево DOM без браузера, загружающего все изображения, содержавшиеся в нем.

Действительно ли это возможно с JavaScript? Я не возражаю, если это только для Mozilla, поскольку я уже использую функции javascript 1.7 (которые, кажется, только для Mozilla на данный момент),

7

javascript jquery image download

задан gfxmonk 2 August 2014 в 05:14

2 ответа

Другие вопросы по тегам:

javascript jquery image download

Похожие вопросы:

score 3 · Answer 1

Очевидный ответ - проанализировать строку и удалить атрибуты src из img (и аналогичные для других внешних ресурсов, которые вы не хотите загружать). Но вы уже подумали об этом, и я уверен, что вы ищете что-то менее хлопотное. Я также предполагаю, что вы уже пытались удалить атрибут src после того, как jquery проанализировал строку, но перед добавлением ее в документ, и обнаружили, что изображения все еще запрашиваются.

Я больше ничего не придумываю, но вам может и не понадобиться выполнять полный синтаксический анализ; эта замена должна выполняться в Firefox с некоторыми оговорками:

thestring = thestring.replace("<img ", "<img src='' ");

Предостережения:

Похоже, это работает в текущем Firefox. Это не означает, что последующие версии не будут по-разному обрабатывать повторяющиеся атрибуты src .
Предполагается, что буквальная строка «универсальное предположение, что эта строка может появиться в значении атрибута на достаточно ... интересной ... странице, особенно во встроенном обработчике onclick , например: ] (Хотя в этом примере ложноположительная замена безвреден.)

Очевидно, что это взлом, но в ограниченной среде с достаточно хорошо известными данными ...

score 3 · Answer 2

Вы можете использовать парсер DOM для управления узлами. Просто замените src атрибуты, сохраните их исходные значения и добавьте их позже.

Пример:

    (function () {
        var s = "<img src='http://www.google.com/logos/olympics10-skijump-hp.png' /><img src='http://www.google.com/logos/olympics10-skijump-hp.png' />";
        var parser = new DOMParser();
        var dom = parser.parseFromString("<div id='mydiv' >" + s + "</div>", "text/xml");
        var imgs = dom.getElementsByTagName("img");
        var stored = [];
        for (var i = 0; i < imgs.length; i++) {
            var img = imgs[i];
            stored.push(img.getAttribute("src"));
            img.setAttribute("myindex", i);
            img.setAttribute("src", null);
        }
        $(document.body).append(new XMLSerializer().serializeToString(dom));
        alert("Images appended");
        window.setTimeout(function () {
            alert("loading images");
            $("#mydiv img").each(function () {
                this.src = stored[$(this).attr("myindex")];
            })
            alert("images loaded");
        }, 2000);
    })();