Используя функцию jquery ready (), но все еще недостаточно быстро? Идеи?

Question

Небольшой вопрос, на который, я надеюсь, кто-то может ответить.

Я создаю это личное расширение для Chrome, чтобы помочь мне протестировать манипуляции с контентом на различных сайтах. На одном из этих сайтов я просто заменяю существующий <img> другим изображением и помещаю эту функцию jquery replaceWith() в функцию $(document).ready().

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

Есть ли способ остановить загрузку страницы до завершения обмена изображениями?

Answer 1

Предположительно, элемент <img> однозначно идентифицируется (например, его атрибут src или id).Если это так, быстро добавьте таблицу стилей при создании документа, эта таблица стилей должна быть нацелена на элемент <img> и скрыть его от сайта.Затем во время обработки .ready() отключите / удалите таблицу стилей.

var ss = document.createElement("style");
ss.textContent = "img[src='/path/to/img.png'] { visibility: hidden; }";
document.documentElement.childNodes[0].appendChild(ss);

$(document).ready(function () { 
    ss.parentNode.removeChild(ss);

    // swap image here
});

Answer 2

Просто идея - не уверен, сработает ли это, но если вы в отчаянии, стоит попробовать.

Вставьте $('img').live('onload', function(){...}), где вы заменяете изображение src либо URL-адресом, указывающим на пустое изображение, либо ничем вообще. Это должно быть достаточно быстро, чтобы не показывать изображение, а затем, когда звонит document.ready, вы можете заменить соответствующие изображения.

Answer 3

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

Answer 4

Это может быть трудно обработать, потому что после завершения загрузки страницы вам нужно дождаться полной загрузки изображения, и вы не можете избежать этого. но вы можете использовать что-то вроде этого:

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

$('imageControl').load(function(){ <br/> // do something when image is loaded completely<br/> })<br/> .error(function(){<br/> // handle if the image is not loaded<br/> })<br/> .attr('src', 'image source');

надеюсь, это поможет,
Привет