www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] Waiting on div contents

  1. #1
    Join Date
    Nov 2010
    Posts
    23

    resolved [RESOLVED] Waiting on div contents

    I'm looking for something like the following

    Code:
    $('#divName').contents().ready(function(){
         alert('ready');
    });
    Basically I have a div with images. I need to know what event I can monitor for when all the pictures have downloaded.

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    .ready() won't work anyway. It doesn't tell you when the images have loaded, it fires when the DOM has been rendered properly, which takes place long before the images are downloaded.

    The only way to fire an event after an image has downloaded, that I know of, is to load it up through Javascript itself.

    The following would probably work, though (not tested):

    Code:
    <div id="mydiv"><img src="very/large/image.jpg"/></div>
    
    
    var img_ = new Image();
    $(img_).load(function() { /* image has downloaded */ }).attr('src','very/large/image.jpg');
    It doesn't have to be in that order, the Javascript part could be anywhere in the document. The reason why this should work is that as long as the url in the javascript and the img tag is the same, the browser will be requesting the same resource so the URL should be cached and both the image in the dom and the img specified in the Javascript function should be finished loading at the exact same time.

    If this does work, then just put your code where I have /* image has downloaded */ and it will work.

    This is an example for a single image, you'll have to be a little bit more inventive for multiple images.

    Like this:

    Code:
    var imagesLoaded = 0;
    var myImages = ['very/large/image1.jpg','very/large/image2.jpg','very/large/image3.jpg','very/large/image4.jpg'];
    
    for(thisImage in myImages) {
      var img_ = new Image();
      $(img_).load(checkLoaded).attr('src',myImages[thisImage]);
    }
    
    function checkLoaded() {
      if(imagesLoaded != myImages.length) { imagesLoaded++; return; }
    
      /* your code here will be run once all images are loaded */
    }
    
    
    
    <div id="mydiv">
     <img src="very/large/image1.jpg"/>
     <img src="very/large/image2.jpg"/>
     <img src="very/large/image3.jpg"/>
     <img src="very/large/image4.jpg"/>
    </div>
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Nov 2010
    Posts
    23
    this did the trick. now im having the same problem with a div of dynamically created hyperlinks. the div is hidden then populated and displayed on a click event. the first time the div is displayed it shows up blank, on the second mouse click it shows up with the list of hyperlinks just fine. Ive tried adapting this idea of the images to links but it is not working. thoughts?

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Images are different from other HTML content in that when you insert an img tag, it doesn't mean that content is loaded, but when you insert something like <a href="#">Link</a>, the content shows up with (virtually) no delay.

    Post your code.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  5. #5
    Join Date
    Mar 2010
    Location
    Singapore
    Posts
    367
    Then how about the onload event of the body tag. If we put Javascript code in the body tag onload event, we are guaranteed all images <img> tags including the DOM is completed already ?

    E.g
    <body onload="XXXX">
    ...
    </body>

  6. #6
    Join Date
    Dec 2005
    Posts
    2,984
    No. The only way (again that I know of) to tell if an image has downloaded it is to use a function like jQuery's load function followed by a callback function as I showed you the first time. All other onload, document.ready(), etc type events check to see if the DOM has been rendered properly.

    What is the code you are using to populate the DIV with links and then show/hide it onclick?
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  7. #7
    Join Date
    Nov 2010
    Posts
    23
    So the html is inside a google maps InfoWindow, which is shown on a Markers click event
    Code:
    ...
    _infoWindow = transformerInfoWindow;
    _infoDiv = $('#transformerInfoDiv');
    ...
    google.maps.event.addListener(marker, 'click', function(){
        _infoDiv.html(getLocationEquipmentHTML(marker.functionalLocation));
        _infoWindow.open(map, marker);
        _infoDiv.show()
    });
    ...
    and here's my function that generates the html which is just a series of links for now, it will be a more complex form later on.

    Code:
    function getLocationEquipmentHTML(_location){
        equipmentHTML = '';
        $.getJSON('getLocationEquipment', {
            location: _location
        }, function(json){
            $(json).each(function(){
                equipmentHTML = equipmentHTML + '<a id="' + $(this)[0] + 'Link" href="javascript:alert('+$(this)[0]+');" >' + $(this)[0] + '</a><br/>'
            });
        });
        //alert('debug spot');
        return equipmentHTML;
    }
    The InfoWindow's content always show up correctly on the second click. Sometimes the first click just produces a blank InfoWindow, sometimes it works on the first click. Sometimes if I click one marker, then click a marker I haven't clicked; the first markers html shows up in the second markers InfoWindow. Then of course if I click the second window again the correct html shows up.

    Also, when I include the alert the InfoWindow's content always shows up correctly.

  8. #8
    Join Date
    Nov 2010
    Posts
    23
    One more note, on the first click an AJAX call is being made. On the second click I'm not seeing any activity on my server so I assume the data is coming from the cache or something similar.

  9. #9
    Join Date
    Nov 2010
    Posts
    23

    Doesn't work in chrome or firefox

    This line doesn't appear to work in chrome or firefox
    Code:
    $(img_).load(checkLoaded).attr('src', json[i]);
    any thoughts?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles