0

After clicking on menu item data is loaded to "#content". I want to use function makeGray() that turns pictures with class "galleryList" to grayscale and saturating them after pointing with mouse. Unfortunately, code below doesn't work until second click:

$(document).delegate(element, 'click', function() {
    $('#content')               
    .stop()
    .animate({opacity: 0}, 'fast', function() {
        $(this).load('subpage.html', function() {
            makeGray('.galleryList');
        })
        .animate({opacity: 1});
    });
});

Edit after Kevin and Daniel posts: There is code of script making pictures gray. The problem is how to wait until images are fully loaded and then run script.

pavlucco
  • 11
  • 1
  • 1
  • 5
  • the callback happens when the request is complete, it doesn't wait for images returned by the request to finish loading. you'll need to preload the images. – Kevin B Aug 15 '13 at 15:44
  • html is loaded, images inside html are not yet (may take more time). don't know how is it important for your code to wait for images to be loaded. **edit:** Kevin was 1st :) – David Aug 15 '13 at 15:47
  • How make it wait until images are fully loaded? – pavlucco Aug 15 '13 at 15:49
  • @pavlucco there is no built-in way to do that, you'll have to do it yourself. – Kevin B Aug 15 '13 at 15:49
  • see [Check if an image is loaded (no errors) in JavaScript](http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript) – metadings Aug 15 '13 at 15:57
  • this answer talks about a plugin that seems to do exactly what you need: http://stackoverflow.com/a/5163865/810899 – user428517 Aug 15 '13 at 15:57

0 Answers0