Issue with lazy load via ajax

Question

I am using http://www.appelsiini.net/projects/lazyload

I am loading images via ajax. Issue is when I load images they show directly then lazyload shows fadeIn effect.

What I want is that image should load with fadeIn effect.

Here is my code

$.ajax({
            type: 'get',
            url: "{{ URL::route('salon.filtergym') }}",
            cache: false,
            data:  {"areas":areas,"distance":distance,"gender":gender,"gymSearchKey":gymSearchKey,"sortPattern":sortPattern,"res": res}
            }).done(
                    function( response ) {
                        $('#result').html(response);
                        if( total == currentRecord && total > 0) {
                            /*Condition for add new button for search in nearby Area*/
                            if((areaID != "") && (gymSearchKey == "") && (areas.length == 1)&&($.inArray(areaID, areas) !== -1))
                            {
                                $('#result').append('<a class="btn blue nearByRecords btn-block" rel='+areaID+' name="'+currentRecord+'" href="javascript:;">Show gyms from nearby areas of '+areaName+' <i class="fa fa-angle-right reset-detail-icon"></i></a>');
                            }
                        }
                        NProgress.done();

                        $("img.lazy").show().lazyload({
                            effect : "fadeIn"
                        });

                    }
            );

Answer 1

try to remove the show() as follows:

$("img.lazy").lazyload({
    effect : "fadeIn"
});