Как заставить веб-страницу думать, что ее изображения загружены? - PullRequest
Новая
       32

Как заставить веб-страницу думать, что ее изображения загружены?

0 голосов
/ 05 ноября 2018

Чтобы дать вам некоторое представление, многие (если не все) веб-сайты загружают свои изображения одну за другой, поэтому, если изображений много, и / или у вас медленный компьютер, большинство изображений не будут отображаться. По большей части этого можно избежать, однако, если вы запускаете скрипт для точных URL-адресов изображений, вам не нужно видеть изображение, вам просто нужен его URL-адрес. Мой вопрос таков:

Можно ли обмануть веб-страницу, заставив ее думать, что изображение уже загружено, чтобы начать загрузку следующей?

Ответы [ 6 ]

0 голосов
/ 17 ноября 2018

используйте плагин под названием lazy load . он загружает всю веб-страницу и позже просто загружает изображение. изображение будет загружено только при прокрутке пользователем.

0 голосов
/ 17 ноября 2018

Я использую это, работает как ожидалось: 

var imageLoading = function(n) {
    var image = document.images[n];
    var downloadingImage = new Image();

    downloadingImage.onload = function(){
        image.src = this.src;
        console.log('Image ' + n + ' loaded');

        if (document.images[++n]) {
            imageLoading(n);
        }
    };

    downloadingImage.src = image.getAttribute("data-src");
}

document.addEventListener("DOMContentLoaded", function(event) {
    setTimeout(function() {
        imageLoading(0);
    }, 0);
});

И измените каждый src атрибут элемента изображения на data-src

0 голосов
/ 16 ноября 2018

Требуется событие "DOMContentLoaded" docs . Он срабатывает, как только документ полностью проанализирован, но до того, как все будет загружено. 

let addIfImage = (list, image) => image.src.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|svg)/g) ?
    [image.src, ...list] :
    list;

let getSrcFromTags= (tag = 'img') => Array.from(document.getElementsByTagName(tag))
    .reduce(addIfImage, []);

if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", doSomething);
} else {  // `DOMContentLoaded` already fired
    doSomething();
}
0 голосов
/ 16 ноября 2018

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

1) Расширение Chrome

2) Программное обеспечение

3) Интернет-сайт

Если вы хотите запустить его несколько раз. Возможно, используйте приведенный выше код https://stackoverflow.com/a/53245330/4674358, завернутый, если условие 

if(document.readyState === "complete") {
  extractURL();
}
else {
  //Add onload or DOMContentLoaded event listeners here: for example,
  window.addEventListener("onload", function () {
    extractURL();
  }, false);
  //or
  /*document.addEventListener("DOMContentLoaded", function () {
    extractURL();
  }, false);*/
}

extractURL() {
  //code mentioned above
}
0 голосов
/ 12 ноября 2018

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

Вы уверены, что изображения действительно ожидают загрузки предыдущего изображения или они ждут определенный интервал времени?

В случае, если вы уверены, что это зависит от загрузки предыдущего изображения, вы можете перенаправить все ваши запросы через какой-либо прокси-сервер / брандмауэр и настроить его на возврат пустого файла с HTTP-статусом 200 каждый раз, когда изображение запрашивается с этого сайта.

Таким образом, браузер (или фактически код сайта) будет предполагать, что он успешно загрузил изображение.

как мне это сделать? - Джек Касбрак

Это на самом деле очень открытый вопрос, основанный на мнениях. Это также будет зависеть от вашей ОС, браузера, системных разрешений и т. Д. Если вы используете Windows и у вас есть достаточные разрешения, вы можете попробовать использовать Fiddler. Он имеет функцию Автоответчик , которую вы можете использовать.

(Я не имею никакого отношения к Fiddler / Telerik как таковой. Я предлагаю это только в качестве примера и потому, что я использовал это в прошлом и знаю, что это может быть использовано для вышеупомянутой цели. Там будет много других продуктов, которые предоставляют аналогичные функции, и вы должны использовать продукт по вашему выбору.)

0 голосов
/ 11 ноября 2018

Чтобы извлечь все URL изображения в текстовый файл, возможно, вы могли бы использовать что-то вроде этого, Если вы выполните этот скрипт на любом веб-сайте, он перечислит URL-адреса изображений 

document.querySelectorAll('*[src]').forEach((item) => {
    const isImage = item.src.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|svg)/g);

    if (isImage) console.log(item.src); 
});

Вы также можете использовать ту же идею для чтения стиля из элементов и получения изображений из фонового URL или чего-то подобного: 

document.querySelectorAll('*').forEach((item) => {
    const computedItem = getComputedStyle(item);

    Object.keys(computedItem).forEach((attr) => {
        const style = computedItem[attr];
        const image = style.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|svg)/g);
        if (image) console.log(image[0]);
    });
});

Итак, в конце дня вы можете выполнить такую ​​функцию, которая будет возвращать массив всех изображений на сайте 

function getImageURLS() {
  let images = [];
  document.querySelectorAll('*').forEach((item) => {
    const computedItem = getComputedStyle(item);

    Object.keys(computedItem).forEach((attr) => {
        const style = computedItem[attr];
        const image = style.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|svg)/g);
        if (image) images.push(image[0]);
    });
  });

  document.querySelectorAll('*[src]').forEach((item) => {
    const isImage = item.src.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|svg)/g);

    if (isImage) images.push(item.src); 
  });
  return images;
}

Вероятно, это можно оптимизировать, но, ну, вы поняли ..

...