1

I'm using a form and Ajax to pull an image dynamically to replace another image in the .results div. My first try worked, but the page jumped up when the image was removed and jumped back down when the image was loaded. I figured I could add style attribute to give the div a height, then after the image is loaded remove the style attribute. What I have below works 70% of the time, the other 30% the stye attribute is being removed before the image is loaded and the page jump is still there. Is there a way to remove the style attribute only after the image is completely loaded? Or set a delay or something? I'm a JS and Ajax noob, so please be gentle. 

        (function($){
        $(function(){
            var $form   = $('#customize'), // Search form
                $target = $('.results'), // Results container
                rp      = 'product_search/results_only_ajax'; // Template for results only

            // Function to execute on success
            var success = function(data, status, xhr) {
                $target.html(data);
                $('.loading').html('<p></p>');
                // Remove style
                $('.results').removeAttr("style");
            };

            // Hijack the form on submit
            $form.submit(function(){

                // Tell target we're loading
                $('.loading').html('<p>Loading...</p>');
                // get height of container, and set height
                currentHeight = $('.results').outerHeight();
                $('.results').css("height", currentHeight);

                // Add custom result page to data
                var data = $form.serialize()
                         + '&result_page=' + rp;

                // Perform the ajax call
                $.ajax({
                    type: 'POST',
                    url: $form.attr('action'),
                    data: data,
                    success: success,
                    dataType: 'html'
                });

                // Don't submit the form afterwards
                return false;
            });
        });
    })(jQuery);

EDIT:

            // Function to execute on success
            var success = function(data, status, xhr) {
                $target.html(data);
                $('.loading').html('<p></p>');
                // $('.results').removeAttr("style");
                setTimeout(function () {
                    $('.results').removeAttr("style");
                }, 1000);
            };
Mike Lohrman
  • 133
  • 5
  • I added a timeout on the success function(in my edit above) which works, but is this the best way to do it? – Mike Lohrman Apr 28 '14 at 16:12
  • Infer-On, The way I had it, sometimes the page jump would still happen because the height style was being removed before the image was loaded. Setting the timer gave the image enough chance to load before removing the style attribute. But I'm not sure if this is the best way. – Mike Lohrman Apr 28 '14 at 16:56
  • 1
    .html() in theory is synchronous that means u don't need a time. Anyway I noticed as well that sometimes it just doesn't work as expected. You could either use jQuery.load() to load your image asynchronous and use the successcallback to add the style. Also you can try this: http://stackoverflow.com/questions/10673603/wait-for-jquery-html-method-to-finish-rendering - it is still a timeout function but it checks for existance of the loaded element and therefor won't break if a browser takes longer than expected – gulty Apr 28 '14 at 16:58

1 Answers1

0

I added a Timeout which is working ok for now.

Mike Lohrman
  • 133
  • 5