Jump to content
Larry Ullman's Book Forums

For's And Onloads


Recommended Posts

I am trying to put an onload event into a JS for loop to loop through and add an onload to each element but only the first element has the onload function attached. I could get the for loop to work when i added an alert message in the loop, i find this strange.

Link to comment
Share on other sites

That is one way to do it, yes.

As a side note, you're better off making the anonymous function into a named function elsewhere, and then just referencing that function by name as the argument for the each method.

By doing that, you're only creating one function object in memory, as opposed to the countless ones you are now. For example, if the each method executes 20 times, then you are creating 20 different function objects, which is a waste of memory.

 

Just my two cents.

  • Upvote 1
Link to comment
Share on other sites

The code i suggest above seems to be a bit glitchy. What this code does is load up an ajax loader gif. You see if i show the gif image straight away on the server it will show an img icon then load then load it afterwards, it doesn't look smooth if you know what i mean. So i have to use the load event to change the opacity of the image gif file from 0 to 1.

 

The problem now is that that if i load up many images sometimes it will not work and some of the ajax loader gif opacities are still at 0 which doesn't look to good on the page. The images upload well after this and all else is working its just this bit.

 

Can you suggest i more reliable way of doing this?

 

(Most of the time i use StackOverFlow to get answers for Javascript or JQuery, even now i am still unsure of how to write certain things in JQuery so i sometimes have to find another way to deal with the problem until later i find something. I am using JQuery mostly because i need my code to be as much browser compatiable as possible, i would love to have the time like you to fiddle around with it. But there are times when i have to use raw JS so if i have to i can do it.)

Link to comment
Share on other sites

I am working on an flash image uploader for my item listing page. Images are selected say 10 for example then after dialog closes 10 image placeholders would be put up on the screen just like empty picture frames, each picture frame has a ajax spiral loader gif rotating. Now when the images are loaded the images will replace the ajax loader images.

 

So what i am trying to do is attach an onload event to the 10 of these image loader gifs before they load up so they load up smoothly without showing the default image icon in the top left hand corner of the image.

 

Here is the code i have now:

var newImage = document.createElement("img");
newImage.className = "thumbnail";
newImage.src = "/images/ajax/ajax-loader-item.gif";
newImage.style.opacity = 0; (I am ignoring old IE < 9 browsers, if its not working for people i will tell them to update their browser)

$(newImage).on('load',function() { newImage.style.opacity = 1; }).each(function() { if(this.complete) { $(this).trigger('load'); } });

The newImage IMG is then appended to a div image placeholder on the page.

 

 

The problem is sometimes this works and all load events are added to the images and sometimes they are not, so the function is not consistent just like Roger Federer's backhand. So what other suggestion do you have?

Link to comment
Share on other sites

Roger Federer's backhand can be troublesome, yes. Hehe!

 

I would recommend a different approach to this problem.

Write the CSS classes necessary to completely style the div and GIF the way you want them, including an opacity of 0. (Here's a quick link for opacity in old IE: http://css-tricks.com/snippets/css/cross-browser-opacity/).

 

Next, write a function that allows you to easily create instances of this image placeholder as many times as you need. For example:

function createImgPlaceholder() {
  
  var div = document.createElement('div'),
    img = new Image();
  
  div.className = 'class-for-GIF-containing-div';
  img.className = 'thumbnail';
  img.src = '/images/ajax/ajax-loader-item.gif';
  div.appendChild(img);
  
  return div;
  
}
 
Then, when you need say 10 of these placeholders, run a loop that calls the createImgPlaceholder function 10 times, and place all of those on the screen.
Upon rendering the ten instances on the screen, you could then even attach an additional class to each, which would create a nice transition from opacity 0 to opacity 1.
 
Finally, to handle the inconsistent loading of the GIF to begin with, the easy solution is to preload the GIF so that it's in the browser cache.
Here is my favorite technique for preloading images:
 
Any questions?
  • Upvote 1
Link to comment
Share on other sites

I do like your answer but still i am left with the mystery to why the onload event doesn't always fire when using it in a for loop. Sometimes it will add the event to each image element while on other times it will only add it to the last one?

 

I will be starting again on this tomorrow, i would like to try out some of your other solutions to see how they work. If i can get them to work and i feel they are better i will use them. I will update you on how they go. The flash uploader original javascript handlers script numerously uses the onload event on an img but that's only for one image at a time.

 

Thank you for your help, it is much appreciated...

Link to comment
Share on other sites

Yeah that CSS method using :after or :before i have seen some websites using this with content. That actually prevents you from downloading the image. Yeah and i found an other website using that on there image uploader. Okay im going to try and get this done quickly.

Link to comment
Share on other sites

I got it working but there are a lot of other CSS problems that have just come up now. This seems to be the best way to do it but i will need to write my code i have much more code than i have explaned to you in the thread it may take a bit of time.

Link to comment
Share on other sites

Now i know what the problem is with my JQuery when you use preloaded images with :before or :after CSS to add the content in. If you  view the page source you can't find any of the change that has taken place meaning the image tag doesn't even show. I need to use my JQuery code to reference this particular image before it loads up the next image and because of this JQuery doesn't find it. Which means i have to do this in another way. Sorry yesterday i was only here in the Morning, i have all day on this now.

Link to comment
Share on other sites

High Five Hartley San, everything is now working my image uploader is so smooth its perfect. Thanks very much for suggesting the image preloading with CSS it was definitely the best way to get that part done. I spent about a week on the images uploading so far. Now i need to write some script for users that don't have Flash and to show a division block instead of the upload button.

 

Edward

 

Update: Everything is done now working on localhost and server, very happy with this code, now i can finally move on.

Link to comment
Share on other sites

Edward, glad you found success.

Would you mind sharing in more detail how you solved the problem though?

I'm still a bit unsure what all you did.

 

Also, what are you using Flash for, and why do you need a div instead of an upload button?

Still rather confused. Sorry.

Link to comment
Share on other sites

I would actually really rather not go into the full details, i am working with Flash SWFUpload Plugin it is used for loading in item images, say similar to the eBay item listings page where you wanted to load in your photos. I am working on a marketplace website it will works pretty much the same way as ebay does but it does have its differences. If you take a look at the core files on SWFUploads downloads page you will understand more about it. You can use one of their example scripts but in my case i had to build a custom one and set all my own JS handlers.

 

http://code.google.com/p/swfupload/

 

There is an Flash Upload button on the page, you have to copy the uploaded image thumbnails into a div on the page to display them. This is the 2nd time i worked on this part on my site its got to be 100% now that means working on the server not just localhost and across browsers and basic mobile interface.

Link to comment
Share on other sites

Copying the uploaded images into a div is as simple as creating a bunch of Image objects with the proper src properties and appending them as children of the div in the DOM.

That shouldn't be hard at all.

 

And as for the SWFUpload plug-in, I would drop that immediately.

The link you sent me to says that it has not been under development for years, and as you know, iDevices do not even support Flash.

 

I would either go with a simple PHP upload solution, or if you don't want to reload the page, use XHR2's File API in combo with a hidden Ajax iframe hack for older browsers.

Link to comment
Share on other sites

Yes copying images into a div is easy my dog could probably do that just remember it wasn't my original question here.

 

No i will NOT be dropping the SWFUpload plugin immediately there are quite a few sites still using the plugin its not affecting them. If i was to use an alternative i would use uploadify.com's version that works with Flash they also have the HTML version. Haha does that mean in a few years i should immediately drop Yii 1 because it is no longer maintained after i built my site, OMG.

 

And tell me who loads up an inventory on their phone, its utterly ridiculous, its the wrong device to be using for managing products. The features that need to work well with mobiles are more directed at the selling side.

 

Anyway what i have works for now i do plan later do add in uploadify.com but that can be done at anytime, ive got more important stuff to build (bare in mind thought that it doesn't have a image resize function, the reason why i didn't go with it now). One thing i really like about SWF is that you don't actually have to validate a file server side because i use the image resize function and if you load up a non-image file, it will through an error so you can deal with the file accordingly. Ive run tests on it nothing goes through so its quite safe for that reason.

 

Just remember on a website we do have feedback that comes in, so if there are hugh number of complaints any parts can be updated and improved. I am not scared. The hard thing is getting it all built.

 

Thanks for your help.

Link to comment
Share on other sites

Yeah i think after doing some more research you may be right. One way or another i will always figure it out but now I gotta move forward. Typing on my phone now darn this is slow but its not that bad i guess at least i am not typing out a 250 word item description, hehe.

 

I think if you were on a mobile a non flash version would be useful at least for just trying the website out and listing one item. When you get home you could always list out a load more.

 

Anyway i am all done. I will ask a question if its something i can't find online.

 

Goodnight. Edward.

Link to comment
Share on other sites

Flash seems more  secure than the regular file uploads methods, i have looked at the plugins and stuff. Implementing these could take 2 months or so for me to do alone, with all the testing and customizations and security. Ive also got this implemented not only for item listings but for user avatars aswell.

 

Ive spend probably about 2 months working with that but i was probably slow because most of my JS and JQuery experience has been learnt through implementing that plugin. I have also cover every error that can happen with an upload so you are alerted if something goes wrong specifically. That's why last night i literally had steam coming out of my ears when you told me to drop SWF.

 

Depending on how far you I wanted to develop a plugin like that i could easily go up to 3 months, i could make something better than all of them that are available now if i really wanted to but i just don't have time like that on my hands.

 

It seems for the time being i have made the right decision. I think before i do something major in the future i may ask you for some input first.

Link to comment
Share on other sites

 Share

×
×
  • Create New...