2

.append() を使用して画像を div にロードしています

これらの新しく追加されたイメージでレイジー ローダー プラグインを使用するにはどうすればよいですか? それを行う方法はありますか？

更新： コードは次のとおりです

//This is a live search script, type something in #livesearch input and it populates a #results ul list with the results
$('#livesearch').live('keyup', function(event) {
    //after ke press detected immediately clear the results div of any previous content
    $('#results').html("");
    // Use the inputed letters to send off an ajax request
    $.getJSON("http://xxxxxx.com/live/" + $(this).val(), function(resp){
            //the ajax returns a json object, next loop through the object and print out the results in a list using append
            $.each(resp.response.docs, function(index, item) {  
            $('#results').append("<li><div style='background-color:rgb(31,31,31);padding:15px;color:rgb(255,255,255);'><span class='inline' style='width:125px;height:50px;margin-right:15px'><img data-original='img/"+item.nameid+".png' src='img/grey.gif' class='lazy' style='display:inline' height='50px'></span><span class='inline' style='width:300px;'><div style='font-size:14px;'>"+item.name+"</div><div style='font-size:12px;color:rgb(99,99,99)'>Strategy | 4 months ago | Played 2,000 times</div></span></div></li>");
        });
    });

    // The list that was created includes images and could have several hundred of them, therefore I would like to lazy load them as you scroll down
    // This line of code is just one of my failed attempts
    $("img.lazy").lazyload();
});

ドキュメントがロードされた後に画像が追加されるため、元の HTML に画像が存在しないため、レイジー ローダー プラグインは画像を「見る」ことが難しいと思います。おそらく、LazyLoad は私がやりたいことを行うことができません。

4

4 に答える 4

1

getJSON コールバックから lazyload() を呼び出します

$.getJSON("http://xxxxxx.com/live/" + $(this).val(), function(resp){
    $.each(resp.response.docs, function(index, item) {  
        $('#results').append("<li>... \
            <img data-original='img/"+item.nameid+".png' \
            src='img/grey.gif' class='lazy' /> \
            ...</li>");
        });
    });
    $("img.lazy").lazyload().removeClass("lazy");
});

追加.removeClass("lazy")すると、遅延ロードが同じ要素に複数回バインドされるのを防ぎます。

于 2012-12-04T23:47:34.893 に答える
1

when()jQuery は、 jQuery Ajax リクエストが完了した後に何かを行う目的で関数を定義するようになりました

// the following code will be executed when the ajax request resolve.
// the ajax function must return the value from calling the $.ajax() method.

$.when(ajax1()).done(function(a1){

        if($('img.lazy').length){

             $('img.lazy').lazyload({ 

                      effect:'fadeIn', 
                      threshold:500, 
                      failure_limit:2 

             }).removeClass('lazy').addClass('lazyloaded');

        }

    });

    function ajax1() {

        return $.ajax({
            url: "someUrl",
            dataType: "json",
            data:  yourJsonData,            
            ...
        });
    }

から: http://api.jquery.com/jQuery.when/

于 2014-10-20T20:51:32.430 に答える
0

私はこの問題を解決する方法を知っていました。$("img.lazy").lazyload();すべての動的追加を行った後に配置する必要があります。

あなたの状況では、それをfunction(index, item)（append行の後に）入れなければなりません。

于 2013-05-27T08:01:49.610 に答える