photo album with php, ajax and mysql, how to deal with the images, loading with ajax?

Posted on 2006-05-11
Last Modified: 2013-11-19
Ok, I would like to use ajax for my web photo album. I am going to have a Album section, thumbnail section and large image panel. I am using on the server side PHP.
Is it possible to send images through ajax? Or can I only send xml, string format with Ajax?
Or do I have to preload all the images to the client side. That would be very slow.

Assuming that I have a total of 200 images. What would be the best way to deal with javascript, php, and mysql?
Should I preload? if so how many? I would just try to find the best efficient way to do this.
Hope we get some good ideas here:)
I am just confused, and I have not found any way to send images through ajax.

Thanks for any reply and help.

Question by:christian1234
    LVL 7

    Assisted Solution

    The reason AJAX is so hot these days is because it can get information from the server with out reloading the entire page. It definitely has its shortcomings which are not entirely supported like caching etc. Ajax can load images and you dont need to preload them. I would suggest you to make good use of AJAX and not for unnecessary effects in your page. The way to send images through ajax is simply passing the path to the image on your website and the browser will automatically download the image from your server. I would suggest you to go through this tutorial for more information.

    Accepted Solution

    By using a preload comment you are essentially not using AJAX to it's fullest potential. The best way to do this is the following:

    Load your page without loading any content with the exception of 1-3 thumbnails.
    When a user clicks next or something like that using AJAX load the rest of the content.

    Here is the code for an AJAX loader I found somewhere:

    <script type="text/javascript">
    function ajaxLoader(url,id) {
      if (document.getElementById) {
        var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
      if (x) {
        x.onreadystatechange = function() {
          if (x.readyState == 4 && x.status == 200) {
            el = document.getElementById(id);
            el.innerHTML = x.responseText;
        }"GET", url, true);

    Also to load the actual page:

    <div id="advert">
    <script type="text/javascript">

    All the actual processing work is done by adblock.php in the background.

    Author Comment

    Thank you for the help. This is was I was looking for.
    I just thought there might be a different way to get the images through ajax.
    Guess the old traditional way is working.
    Best Regards,

    Featured Post

    Course: HTML5 Specialist

    HTML5 development skills are critical to all developers. HTML5 is the foundation to almost any development process. That's why business, design studios, development shops and other organizations need HTML5 developers. Get your foot in the door as a HTML5 specialist.

    Join & Write a Comment

    Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
    The first time you look at a web page and its source code, you are probably a little intimidated by the use of symbols and jargon that really looks foreign to you. You might not even know where to start to begin learning what it all means. That’…
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

    729 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

    16 Experts available now in Live!

    Get 1:1 Help Now