0

サンプルコードがあります：

<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" />
4

1 に答える 1

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

于 2012-10-10T07:25:32.950 に答える