Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image.onLoad not firing

    I also tried onload, it's not helping either. Sources on thei nternet seem to disagree about the event name

    The idea is to load images one after another and display a page when they are all done.
    So here's the code. If we uncollmet the alert in loadPhoto, it fires one time with 0 - no further events are invoked.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <HTML>
    	<HEAD>
    
    
    <script>
    
    var df;
    var roomId = 439; 
    var peopleArray = new Array();
    
    
    function Person(color,userId,img,fio,reqId)
    {
    	this.color = color;
    	this.userId = userId;
    	this.img = img;
    	this.fio = fio;
    	this.reqId = reqId;
    	this.photo = null;
    }
    
    function loadPhoto(n)
    {
    //	alert(n);
    	peopleArray[n].photo = new Image();
    	if (n < (peopleArray.length-1))
    	{
    		peopleArray[n].photo.onLoad = function() { loadPhoto(n+1) };
    	}
    	else
    	{
    		peopleArray[n].photo.onLoad = addDivs;
    	}
    	peopleArray[n].photo.src = peopleArray[n].img;
    }
    
    function addDivs()
    {
    	var l = peopleArray.length;
    	for (var i = 0; i < l; i++)
    	{
    		var person = peopleArray[i];
    		var box = document.createElement('<div class="photobox" style="background-color:'+person.color+'">');
    		box.id = 'box'+person.userId+'_1';
    		box.innerHTML = '<a href="javascript: submitform(\'Id='+roomId+'&UserId='+person.userId+'&RequestID='+person.reqId+');"><img src="http://server/app/'+person.img+'.jpg" id="img'+person.userId+'_1" style="margin: 0px; padding: 0px;" height="100"><br /><span id="fio'+person.userId+'_1">'+person.fio+'</span></a>';
    		df.appendChild(box);
    	}
    	var div = document.getElementById('tdiv');
    	div.appendChild(df);	
    }
    
    function prepareLoad()
    {
    	peopleArray[peopleArray.length] = new Person('yellow',1135,'HPIM0354','John Doe','');
    /* snip */
    	peopleArray[peopleArray.length] = new Person('yellow',1310,'HPIM1458','John Doe 2','');
    	peopleArray[peopleArray.length] = new Person('yellow',1311,'HPIM5588','John Doe 3','');
    }
    
    
    function fillPhotos()
    {
    	df = document.createDocumentFragment();
    	prepareLoad();
    	loadPhoto(0);
    }
    </script>
    	</HEAD>
    	<body style="TEXT-ALIGN: center;" onload="fillPhotos();">
    			<div id="container">
    				<div id="tdiv"></div>
    
    			</div>
    	</body>
    </HTML>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    onerror not onload is invoked because you are not passing a valid image. Why are you passing a filename with no extension?
    Code:
    peopleArray[peopleArray.length] = new Person('yellow',1310,'HPIM1458','John Doe 2','');


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •