2

I have coded an image gallery. The onclick event on any images loads the images in an modal window. currently the images are loaded just by replacing the value of src attribute of img tag.

My question is: Can i use ajax to load the images? would doing this will enhance performance(i.e minimise loading time) in any way?

my next question is: i want to use spinner while the browser waits for the new image to be loaded on clicking next button of modal window. i don't know how to do it. any suggestion will be helpful.

Here is jsfiddle of my image gallery jsFiddle

jquery code i am using to load images:

 $('.gallery a').click(function(evt) {
 var imgPath = $(this).attr('href');
 $('.gallery-overlay').find('.gallery-image').attr('src',imgPath); 
 });
shubendrak
  • 2,038
  • 4
  • 27
  • 56

2 Answers2

1

Answer to next question first.

If you load images at once.

Here is the jsFiddle.

If you use ajax, this function should be instantiated to load image, this would show the ajax-spinner till the image is loaded.

Get your ajax spinner here..

jQuery

//Assuming gallery-overlay is id of the div where you are showing image.

$(function(){
     $("#gallery-overlay").html("<img src='ajax-spinner.gif'>");
     $.post(url,{variable:variable},function(data){
            $("#gallery-overlay").html(data);
                //data is whatever your php file returns. The ajax-spinner will be there till this appends the html returned by your php file.
      });
})

PHP

//Post variables

//Get the src and image details from table.
$src = $row['src-in-db'];
$alt = $row['alt-in-db'];
$width = $row['width-in-db'];
$height = $row['height-in-db'];
//Echo the html code for #gallery-overlay.

    echo "
    <img src='".$src."' width='".$width."' height='".$height."' alt='".$alt."'>
    ";

And then for next and prev buttons too, you will not need the jQuery you have done in your fiddle. You will need another php file that sends you the image html.

Answer to first question

As I told already in your previous question, IMO, it would depend on how many images you load at once. Tell me how many are you loading?

You have also done the jQuery part and all, So I would suggest to keep ajax away for now. If you are loading about 20-25 images too.

Here are some questions which you must see.

Question 1.

Question 2.(These answers are sufficient for your first question)

And since this is a image gallery what I am sure about is you will show the images in the preview outside the modal window, right?

Then there is absolutely no need to use ajax, since the images are cached by browsers.

Conclusion: Don't use ajax. Let it be what you have done already. Just add close button or event handler for esc button to close modal window.

Increase max-age for img cache by browsers,

Do browsers cache images?

How do you cache an image in Javascript

Google link

Community
  • 1
  • 1
Optimus Prime
  • 6,817
  • 5
  • 32
  • 60
  • I am having around 50 images in my whole webpage. I am using the code – shubendrak Jul 28 '13 at 06:25
  • and if i keep ajax away from it. i am quite sure that while clicking the next button in modal window, the browser will take time to load the next 100kb(large size image). using this technique how can i insert spinner to appear while the browser is downloading the next 100kb image – shubendrak Jul 28 '13 at 06:29
  • Yes, still you should keep ajax away, i don't think the size matters in caching images. Look here to maximise cache-age. Adding it to answer too. – Optimus Prime Jul 28 '13 at 06:31
  • @Shubendra The first link I added now contains info about preloading images. Do that. Added a google link. Hope that helps. It shows a lot of things about caching – Optimus Prime Jul 28 '13 at 06:33
  • i don't want to preload all the images. now i like the way it is. i just want the spinner to appear while clicking the next button in modal window. could you please suggest me how to add spinner with the current implementation – shubendrak Jul 28 '13 at 06:39
  • i want to hide my modal window. i know how to do it by putting a close button. but i don't want to put close button. i want to hide modal window when someone click on any place other then these three div `gallery-image` `gallery-control-previous` and `gallery-control-next`. how can i do that – shubendrak Jul 29 '13 at 07:11
  • http://stackoverflow.com/questions/17928587/hiding-a-modal-window-without-using-close-button here's the link for you optimus – shubendrak Jul 29 '13 at 15:54
0

I had worked with something similar to this a while back here's the code snippet:

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);
        }
    });

This would also give you the possibility to have the loading spinner you mentioned as well. Let me know if this helps.

dmcqu314
  • 875
  • 11
  • 29