Solved

Image loading

Posted on 2011-09-05
9
223 Views
Last Modified: 2012-05-12
I have a page with links to a lot of images.  I notice that when you click the image links some images paint from top to bottom, and others appear all at once but blurry, and then a half second later the image corrects to full resolution.

I wondering what controls the way the image loads and if I have any say about it.

Thanks
0
Comment
Question by:steva
  • 4
  • 4
9 Comments
 
LVL 22

Expert Comment

by:plusone3055
ID: 36484243
you dont really have any say about it.. the images loads by types and  IE JPG, GIF, ect ect and more importantly SIZE .. If you want ot have "control" ocer the resize them to the same size then it will load faster  
for the best consistency use Jpg Files
If they are large  
0
 
LVL 5

Expert Comment

by:wmadrid1
ID: 36484701
You maybe can do a javascript preload of the images,
or use a javascript as lightbox
http://www.lokeshdhakar.com/projects/lightbox2/
0
 

Author Comment

by:steva
ID: 36495697
Thanks for the input but that doesn't really answer my question.  I know if I preload images they'll snap in place, but the question is, when you don't preload them (there may not be time to  preload before the image is requested)  what causes some images to load in a two-step process ( blurry, then clear)  and others to scan themselves in?

Thanks
0
 
LVL 5

Expert Comment

by:wmadrid1
ID: 36496313
that's depends of how the web browser renders the images.
please tellme the web browser you are testing, and if in all these the results are the same
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:steva
ID: 36496628
I was using Firefox, and it renders some images the blurry/clear way and others it scans in.  IE and Chrome seem to always show black until  the image is loaded and then they show the image all at once.

Looking closer, it seems that images that are around 1MByte get the blurry/clear treatment in Firefox while the images that get scanned in are all over 2.8MB.  So I guess Firefox decides how to display  the image depending on the image's size, while the other browsers show you nothing until they have all of the image.  Actually, the other browsers show you nothing until they have about 1MB and then they show you that.  So for them,  the 2.8MB image appears in three progressive steps. Firefox, when it scans the image in, seems to read a small amount, maybe 50KBytes, displays that, reads another 50KB, etc.





0
 
LVL 5

Accepted Solution

by:
wmadrid1 earned 500 total points
ID: 36499398
Ok, other option you could try, is AJAX
load the image and show it when load is complete

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
                      .load(function() {
                         if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                             alert('broken image!');
                         } else {
                             $("#something").append(img);
                         }
                      });

http://stackoverflow.com/questions/4285042/can-jquery-ajax-load-image
0
 

Author Comment

by:steva
ID: 36499628
Ajax is a great idea!  In my web development I keep going up to doors marked "AJAX" but then I find another way to do it instead of going through the door.  And here I am again.  Sooner or later I know I need to add AJAX to my toolbox and your code and reference is a great way to start.  Thanks.

I'll give you the points.

By the way, this is a little off topic, but you seem to have some experience with images, so I thought I would throw it out and see what your thougts are.  I know it's recommended that you resize images before you download them to a browser because external programs (e.g., IrfanView) do a better job of resizing than browsers do, plus, if you resize beforehand you benefit from a smaller load and less processing time spent in the browser.  BUT,  if you've built a fluid websit, such that when you resize the page the images and divs all shrink or grow  proportionately, the image gets resized anyway by the browser.  And when you resize a resized image I find that the result is not as crisp as when you just resize once. So I'm thinking that if you want to end up with  the crispest image and you have a fluid page design, you should not resize first, but download the larger original image and let the browser resize it just once.  Any thoughts?

Thanks for your help.
0
 
LVL 5

Expert Comment

by:wmadrid1
ID: 36502640
I am not an expert on images.
When working with web apps, we depend of web browsers. Also we can make some framework to try manage the images, dowloading them in background, but always will be some problem in some web browser.

I can recommend you try the AJAX with JQuery
http://jquery.com/
It's free and can help you with the javascript and AJAX easy use, also have some interesting plugins .
0
 

Author Comment

by:steva
ID: 36502989
Thanks.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Bootstrap Datable Spinner 3 29
HTML page and JavaScript 2 50
HTML Lists 3 29
Printing a Google Form 2 3
Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now