Problem in loading images that contained in div. IE6 vs Firefox

[obstinate]

hello all,

i'm a newbie in ajax. now i work in team that developed an online map site which is similar like google map.

we use <div> to contain the map.
This div contains map image tiles and this map can be dragged like google map,
when we drag this map, the map will request images with ajax.
At this point, both in IE 6 an firefox has no problem to load the map image tiles.

After that, we want to create icons that can be clicked,
each of the icons is contained in a div with unique id.
If we generated just few icons and we dragg the map,
both in IE6 and firefox will have the same fast respond in loading the map tile.
but after we generate more than 10 icons, firefox is faster than IE6 in loading the map tile.

With that number of icons, firefox is about 3 times faster than IE.
IE needs about 2-3 seconds to load the images after we dragged the map.

Can anyone give explanation about what we experience now?
Does IE have a different behaviour than mozilla in loading the images,
especially when it has many div that contain icon (maybe about 20-50 div that contain icon)

[acoder]

Welcome to TSDN!

Post some sample code or a link.

[obstinate]

sorry,im also a newbie in this forum, i didn't know that i had to post my code.

well,here they are..

<script language="javascript">
function drawIcons(x,y,icon)
{
    var point = new GLatLng(x, y);
    var mark = new createIcons(point, icon); <!--###### this is where i generate the icon that contained in divs -->
    map.addOverlay(mark);
}
 
function defIcon(icon_path)
{
    if (icon_path!="")
    { 
        var icon = new GenIcon();
        icon.setSrc(icon_path);
        return icon;
    }
}
 
function GenIcon() {
    var tImg = new Image();
    this.setSrc = function(xsrc) {
        this.src = xsrc;
        tImg.src = xsrc;
    }
    this.size = new GSize(tImg.width, tImg.height);
}
 
function GenSize(w, h) {
    this.width = w;
    this.height = h;
}
 
function createIcons(point, icon) {
    this.icon = icon;
    if (icon==null) this.icon = new GIcon();
 
    if (typeof this.points.length == 'undefined')    {
        Map.icon.push(this.points);
        Map.icon.push(this.icon);
        content = new setIcon(this.icon.src, this.points.vx, this.points.vy, this.icon.size.width, this.icon.size.height); <!--###### this is the code that i begin to set the icon -->
    } else {
        content = new Array(this.points.length);
        for (var i=0; i<this.points.length; i++)    {
            Map.icon.push(this.points[i]);
            Map.icon.push(this.icon);
            content[i] = new setIcon(this.icon.src, this.points[i].vx, this.points[i].vy, this.icon.size.width, this.icon.size.height);
        }
    }        
function setIcon(urlImage, x, y, width, height) {
    var tempXY = new GLatLng(Map.currentX, Map.currentY);
    if (typeof Map.icon.length != 'undefined')    {
        var divLegend = new createDiv("xicon"+((Map.icon.length/2)-1)); <!--###### this is where the div were created -->
 
        divLegend.setXY(x, y);
        divLegend.setSize(width, height);
        var img = new Image();
        img.src = urlImage;
        divLegend.append(img); <!--#######this is where the image or icon was appended into the div -->
        return divLegend.div;
    }
}
function createDiv(id) {
    var id;
    this.div = document.createElement("div");
    this.id = id;
    this.div.setAttribute("id", id);
    this.setXY = function(x,y) {
        this.div.style.left = x+"px";
        this.div.style.top = y+"px";
    };
}
<?php
function generateStationsIcon($arr)
{
    $icons = "";
    for($i=0;$i<count($arr);$i++)
//        for($i=0;$i<1;$i++)
    {
            $x = $arr[$i]["x_addr"];
            $y = $arr[$i]["y_addr"];
            $desc = "";
            $icons .= 'icons'.$i.' = defIcon("'.$this->map_images_path.'icon1.gif"); ';
            $icons .= 'drawIcons('.$x.','.$y.',icons'.$i.'"); ';
    }
    return $icons;
}
 
if(trim($stations_attr)!="")
{
    echo $this->generateStationsIcon($stations_attr);
}    
?>
</script>
 

is this enough?

-cheers- :D