php - 使用ajax时jquerylazyload不运行？

Question

我有一个示例代码：

<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" />');
           } 
        });
    }); 
}

但是当结果请求ajax是结果时

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

如何用结果修复它是

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

Answer 1

您似乎在图像元素实际上在您的 HTMl 中之前分配了 Lazyload。您需要在 ajax 函数的成功回调中分配它。

<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" });
           } 
        });
    }); 
});