Zapobieganie ładowaniu obrazów w jQuery AJAX spoza DOMY

Question

Używam żądania ajax jQuery do przechwytywania i parsowania HTML na stronie dodatkowej. Patrząc na panel Network zarówno Chrome, jak i FF, zauważyłem, że zostanie załadowany obrazy z tego miejsca - ale tylko wtedy, gdy ładuję wynik za pomocą $ (dane) w wywołaniu zwrotnym "powodzenia".

Treści NIE są ładowane do DOM tej strony, więc nie jestem pewien, dlaczego tak się dzieje.

Ale w każdym razie, po prostu zapytałem, czy istnieje sposób, aby temu zapobiec? Potrzebuję pobrać informacje z wyniku, ale nigdy nie trafi on do głównego DOM. Czy skrypty zapobiegną ładowaniu obrazu, dopóki widok nie będzie działał w tym miejscu, czy też nigdy nie będzie działał przeciw obciążonemu elementowi? Zauważ, że jest to dla aplikacji usercript, więc nie mam dość kontroli nad docelowym HTML.

Dziękujemy!

Answer 1

Powodem dlaczego tak się dzieje jest to, że tak szybko, jak utworzyć obraz z właściwością src, że obraz jest załadowany. Na przykład:

var image = document.createElement('img'); 
image.src = 'example.png'; 

Obraz jest natychmiast ładowany przez przeglądarkę, zanim zostanie on dołączony do DOM. Jest to zasadniczo optymalizacja. Na przykład można go użyć do wstępnego wczytania obrazów, które będą później używane.

Ponieważ jQuery tworzy ciąg HTML w strukturze DOM, tworzy elementy img w taki sam sposób, jak robi to powyższy fragment. Kiedy element obrazu powstaje, zanim zostanie dołączony do DOM, plik jest ładowany z serwera.

Najprostszym rozwiązaniem byłoby, aby usunąć wszystkie img znaczników z HTML zanim dołączy go:

html = html.replace(/<img\b[^>]*>/ig, ''); 

Jeśli to nie jest opcją i trzeba img elementy, można zmienić nazwy atrybutów do src coś innego lub usuń atrybuty, jeśli ich nie potrzebujesz.

Answer 2

Możesz znaleźć i usunąć wszystkie tagi graficzne z zwróconego ciągu przed załadowaniem go do DOM.

To regex dla obrazów HTML:

<[iI][mM][gG][a-zA-Z0-9\s=".]*((src)=\s*(?:"([^"]*)"|'[^']*'))[a-zA-Z0-9\s=".]*/*>(?:</[iI][mM][gG]>)* 

Answer 3

Twój problem polega na załadowaniu tekstu odpowiedzi do elementu jQuery ($(data)). To faktycznie tworzy DOM dla załadowanych treści, nawet jeśli nie dodajesz go do "głównego" DOM.

Powinieneś spróbować zachować tekst z jQuery i traktować go na poziomie tekstu za pomocą wyrażenia regularnego lub załadować do dokumentu XML i przesyłać do niego zapytanie za pomocą różnych dostępnych metod XML.

Jeśli chcesz użyć jQuery i zatrzymać ładowanie można spróbować czytanie tutaj: Javascript: Cancel/Stop Image Requests