Dodanie onload dla każdego zdjęcia Opcje

[Matrix12]

Witam,



mam taki problem. Chce aby dla każdego zdjęcia w dokumencie był dodany znacznik onload który wywołuje funkcje ajaxową która zwraca dla niego odpowiednie elementy html. Problem w tym że na mozilli zdjęcie się ładuje i onload wywołuje funkcje ajaxową. Jednak na chromie zdjęcie niby ma onload ale tych elementów nie ładuje... Wydaje mi się że zdjęcie za wczesnie się ładuje a dopiero wtedy jest mu dodany znacznik onload..
Teraz mam to zrobione tak:




$(document).ready(function(){
$(img).load().each(function(){
var pic = $(this).attr("id");
$(this).attr({"onload": "showMarker("+pic+")});
});
});




Próbowałem z $(window).load(); ale to też nie daje rady.. po prostu musze wczytać znaczniki zanim zdjęcie się załaduje.. macie jakieś pomysły jak to zrobić?

[qbas-s]

w konsoli masz jakieś błędy?
nie wiem czy tylko tu się pomyliłeś ale to
$(img)
powinno być
$("img")

plik z tym js'em spróbuj wczytać przed </body>

[Matrix12]

Nie odpisałem "" ale w prawdziwym kodzie to mam. Problem w tym że ten kod muszę wywolać w body.. innego wyjścia nie mam. A problem z tym że onload nie działa w chromie

[qbas-s]

po co Ci load()?

wystarczy samo $('img').each

[Matrix12]

Okej ale to i tak nic nie daje. próbowałem wszelkich sposóbów. Problem leży w tym , że artykuł jest z TINY MCE i finalnie zdjęcia wychodza bez żadnej klasy i żadnego id.. Ja w document.ready muszę nadać im klasy id, kontenery które ich odaczają i dodać im onload by po załadowaniu zdjęcie opaliło funkcje i wczytało sobie dodatki poprzez ajax.. na mozilli działa to, wydaje mi się że znacznik onload jest dodany wczesniej niż finalnie img znajdzie się w dokumencie.. i jak zdjęcie się załaduje to odpala onload.. natomiast w chrome chyba jest tak że zdjecie się załadowałow tedy dopiero dodaje mu sie onload a onload nie opali bo zdj jest już załadowane...

[qbas-s]

Konsolo coś Ci wyrzuca?
Opóźnienie w przypadku jquery nie powinno mieć miejsca - zapewnia Ci to deklaracja $(document).ready - czyli jeśli dokument zostanie załadowany dopiero do akcji wchodzi jquery

[viking]

Tylko pewnie obrazki są dynamicznie dodawane więc w momencie ready nie istnieją w DOM. Albo problem z cache http://stackoverflow.com/questions/3877027...image-is-cached

[Comandeer]

Obrazki nie łapią się na $(document).ready, bo to zasób wczytywany PO DOM. Tutaj łapie je jedynie load okna.

Poza tym problemy z wczytywaniem obrazków znane są nie od dziś: https://github.com/desandro/imagesloaded

[qbas-s]

Obrazki nie łapią się na $(document).ready, bo to zasób wczytywany PO DOM. Tutaj łapie je jedynie load okna.

a to nie jest tak, że nie łapie się tylko atrybut src, natomiast znacznik img jest normalnie wczytywany?

[Malukaz]

wrzuc gdzies i daj link szybka piłka

[Comandeer]

@qbas-s ale ja nie mówię o znaczniku tylko o obrazku (IMG:style_emoticons/default/wink.gif) Tak, znacznik img jest normalnie parsowany i jego [src] jest wrzucane na listę wczytywanych zasobów. Dodać do tego limit jednoczesnych połączeń w browserach i mamy odpowiedź na pytanie czemu obrazki są doczytywane po sparsowaniu i przemieleniu całego DOM.

[qbas-s]

Tak, znacznik img jest normalnie parsowany i jego [src] jest wrzucane na listę wczytywanych zasobów.

faktycznie - zawartość atrybutu src jest w tym przypadku istotna bo jakiś marker ma się tam pojawiać

rozwiązaniem mogłoby być ładowanie zawartości do src za pomocą ajax'a - wtedy po wypełnieniu src moglibyśmy dla danego elementu zastosować zapewne trochę zmodyfikowaną funkcję showMarker.

Oczywiście może być to jakieś rozwiązanie jeśli nie zależy nam na indeksowaniu tych grafik w google

Ten post edytował qbas-s 27.08.2015, 09:49:39

[Pyton_000]

a to
$('img').ready()
nie złapie załadowania obrazka?

[Comandeer]

Nie, bo to łapie wczytanie samego DOM (zdarzenie DOMContentLoaded)

[Pyton_000]

Fakt. Zajrzałem bo pamiętałem że gdzieś to widziałem.
Miałem gdzies u siebie cos takiego:

Kod

$('img').one('load', function()
        {
            console.log('Image Ready');
        });

I działało to nawet (IMG:style_emoticons/default/smile.gif)