Probleme mit Image Objekt und externer URLaus XML

[eclipse240hp]

Hallo,

ich erhalte per Ajax eine XML die URLs von jpg Grafiken enthält.
Was ich möchte ist, die Grafiken in ein ImageObejt zu schrieben und dann anhand einer mindestgröße von 150x150px in ein Array schreiben.
Leider wird die größe nicht bei jeder Grafik erkannt, auch wenn die Größe passt... width und height sind einfach 0...
Ich vermute, dass das Bild in Image Objekt noch nicht ganz geladen ist, und das Script einfach weiter arbeitet und es so zu width und height = 0 kommt.

Gibt es eine Möglichkeit zu prüfen und ggf. zu warten ob das Image Objekt das Bild ganz geladen hat?? Es handelt sich manschmal um recht große bilder, so das es auch mal eine Sekunde dauern kann, bis es geladen wurde.

Ich habe schon echt alles ausorpbiert.. aber immer das selbe

Dies ist der Teil des Codes, wo die XML ausgelesen wird.

                        var id = 0;
            var img_url = null;
            var img_height = 0;
            var img_width = 0;
            var img_pixel = 0;
            var newImage = new Image;
                
            $(xml).find('event').each(function(){                
                
                id = $(this).find('id').text();
                img_url = $(this).find('img').text();
                
                //alert(img_url);
                                                            
                
                newImage.src = img_url;    
                
                id = parseInt(id);
                
                img_width = parseInt(newImage.width);
                img_height = parseInt(newImage.height);
                img_pixel = img_width*img_height;
                    
                alert(id+" - "+img_url+" "+img_width+" "+img_height+" "+img_pixel);    
                
                anz_images++;
                
                                
                if(img_pixel > 22500)
                {                    
                    var row={};
                        row.id = id;
                      row.img_width = img_width;
                        row.img_height = img_height;
                        row.img_url = img_url;
                       row.img_pixel = img_pixel;                   
                       img_array.push(row);                    
                }                                                                                              
            });                            
        }                
     }); 

[kkapsner]

Das <img> hat ein onload-Event - auf das musst du warten. Um Cacheprobleme mit dem IE zu vermeidenl, musst du den Event-Listener setzten, bevor du das .src-Attribut zuweist.

PS: parseInt sollte man als zweiten Parameter die Basis, nach der der String interpretiert werden soll, übergeben.
PPS: Dein Codestil ist nicht sehr konsistent...

[eclipse240hp]

Super, danke für die Antwort. ich probiere das gleich mal aus.

was genau meinst du mit "PS: parseInt sollte man als zweiten Parameter die Basis, nach der der String interpretiert werden soll, übergeben.
und mit "PPS: Dein Codestil ist nicht sehr konsistent..." ?
Ich bin immer bereit etwas dazu zu lernen

[miniA4kuser]

was genau meinst du mit "PS: parseInt sollte man als zweiten Parameter die Basis, nach der der String interpretiert werden soll, übergeben.

Les dir mal selfhtml...parseInt() durch und achte vor allem auf den Absatz unter Beachten Sie:. Das sollte deine Frage beantworten.

[eclipse240hp]

Danke bereits für die Hilfe!

Ich habe es nun mit dem onload hinbekommen.. leider habe ich jetzt ein weiteres Problem.. Und zwar schreibe ich die URL der Bilder die eine bestimmte Größe haben in ein Array.. alles funktioniert im FF super.. leider wird im Crome keine Ausgabe der bilder vorgenommen.. es wird zwar angezeigt das bilder gefunden wurden, aber das script spring nicht an die stelle, in der das array ausgegeben wird..
wieso geht es denn im ff und im crome nicht :/ ???

das ist mein neuer Code

var img_array = new Array();

success: function(xml) {
           
$('#btn_find_image').html("Bilder suchen");    
               
               var id = 0;
            var img_url = null;
            var img_height = 0;
            var img_width = 0;
            var img_pixel = 0;
            
                            
            $(xml).find('event').each(function(){                
                
                id = $(this).find('id').text();
                img_url = $(this).find('img').text();
                
                //alert(img_url);
                
                
                var newImage = new Image;
                newImage.onload = checkSize;                                            
                newImage.src = img_url;                
                
                //für IE
                if(newImage.complete) newImage.onload();                 
                
                function checkSize()
                {                    
                    id = parseInt(id);
                    
                    img_url = newImage.src;
                    
                    img_width = parseInt(newImage.width);
                    img_height = parseInt(newImage.height);
                    img_pixel = img_width*img_height;
                
                    if(img_pixel > 22499)
                    {        
                    
                        //alert(id+" - "+img_url+" "+img_width+" "+img_height+" "+img_pixel);    
                                                        
                        var row={};
                        row.id = id;
                          row.img_width = img_width;
                        row.img_height = img_height;
                        row.img_url = img_url;
                           row.img_pixel = img_pixel;                   
                           img_array.push(row);                    
                        
                        anz_images++;
                        
                        $("#new_pin_msg_no_img").css("display", "block");
                        $("#new_pin_msg_no_img").html(anz_images+" gefundene Bilder");
                                        
                    }    
                }
                                                                                          
            });
            
            if(img_array[0]["id"] == "null")
            {
                $("#new_pin_msg_no_img").css("display", "block");
                $("#new_pin_msg_no_img").html("Keine Bilder gefunden");
            }
            else
            {                
                //alert(print_r(img_array))
                var wait = function(){                    
                    setTimeout(function (){                                
                        img_array.sort((function(index){
                            return function(a, b){
                                return (a[index] === b[index] ? 0 : (a[index] > b[index] ? -1 : 1));
                            };
                        })('img_pixel'));                
                        
                        var img_id = 0;
                        var img_url = img_array[0]["img_url"];
                        var img_id_text = parseInt(img_id) + 1;
                        var img_href = $("#url_find_image").val();            
                                    
                        $("#new_pin_img_id").val(img_id);
                        $("#new_pin_img_url").val(img_url);
                        $("#url_find_image_hidden").val(img_href);
                        $("#new_pin_imageview_img").attr("src", img_url);
                        $("#new_pin_img_id_text").text("Bild: "+img_id_text+" von "+img_array.length);
                        $("#new_pin_img_box_buttons").css("display", "block");
                        
                        if($("#new_pin_formular").css("display") == "none")
                        {
                            $("#new_pin_formular").toggle("slow");
                            $("#new_pin").css("width", "940px");
                        }
                    }, 2000);                
                };
                wait();
                //var t = setTimeout("showImageArray", 500);
            }                                        
        } 

[miniA4kuser]

... es wird zwar angezeigt das bilder gefunden wurden, aber das script spring nicht an die stelle, in der das array ausgegeben wird ...

Wie kommst du darauf?
Hast du mal einen Blick in die Fehlerkonsole gewagt?

[kkapsner]

Äh - die weitere Verarbeitung darfst du erst ausführen, wenn alle Bilder geladen wurden... d.h. irgendwo im onload-Eventlistener musst du überprüfen, ob du fertig bist und erst dann die weitere Verarbeitung durchführen.
Dass das Ganze im FF funktioniert wundert mich sowieso - ist aber wahrscheinlich nur deswegen so, da die Bilder bei dir schon im Cache sind.