jquery lazyload not run when using ajax?

Question

I have a sample code:

<script src="js/jquery-1.4.2.min_2.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
   $(function () {
       $("img").lazyload({ placeholder: "images/grey.gif", effect: "fadeIn" });
   });
</script>
<a href="#" class="click">click here</a>
<div id="result"></div>
$(document).ready(function() {
   $(".click").click(function(e){
        e.preventDefault(); 
        $.ajax({
           type: 'POST',
           url:'',
           data: '',
           async: true,
           success: function(response) {
                $('#result').html('<img src="test.png" />');
           } 
        });
    }); 
}

But when result request ajax is result is

<img src="images/grey.gif" data-original="test.png" />

How to fix it with result is

<img src="test.png" data-original="test.png" />

Sushanth -- · Accepted Answer · 2012-10-10 07:25:32Z

You seem to assign the Lazyload before the image element is actually in your HTMl.. You need to assign it in the success callback of ajax function..

<script src="js/jquery-1.4.2.min_2.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>

<a href="#" class="click">click here</a>
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function() {
   $(".click").click(function(e){
        e.preventDefault(); 
        $.ajax({
           type: 'POST',
           url:'yoururl',
           data: '{}',
           async: true,
           success: function(response) {
               // If response contains the image src 
               // then replace the src of the image with the response
                $('#result').html('<img src="test.png" data-original="test.png" />');
                $("#result img").attr('src', 'images/grey.gif')
                   .lazyload({ placeholder: "images/grey.gif", effect: "fadeIn" });
           } 
        });
    }); 
});

Collectives™ on Stack Overflow

jquery lazyload not run when using ajax?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related