jquery之Bootstrap 同位素和延迟加载通过 json 获取/加载图像

用于 ajax 获取的正常同位素使用正在工作。 请参阅工作 jsfiddle 。

通过 ajax 获取延迟加载的同位素不起作用。 查看问题jsfiddle .

问题: 延迟加载不触发并一直显示灰色图像。

用于延迟加载设置的 JavaScript :

$(document).ready(function () { 
    // 
    // initialize at ready ; 
    // 
    $container.isotope({ 
        itemSelector: '.box', 
        columnWidth: function (containerWidth) { 
            return containerWidth / 12; 
        }, 
        onLayout: function () { 
            $win.trigger("scroll"); 
        } 
    }); 
    // 
    // here i will be using data through api 
    // For now I am defining json manually 
    // var json is defined at top of this code  
    // considering json return was success 
    //$.getJSON(APIURL, function (json) { 
    var newElements = ""; 
    $.each(json, function (key, value) { 
        console.log(key); 
        newElements += 
            '<div class="box">' + 
            '<img class="lazy" src="' + small_img + '" data-originalsrc="' + value['image'] + '" width="' + value['width'] + '" height="' + value['height'] + '" />' + 
            '</div>'; 
    }); 
 
    var $newElems = $(newElements); 
 
    $container.append($newElems).imagesLoaded(function () { 
 
        $container.isotope('appended', $newElems); 
 
        $imgs.lazyload({ 
            container: $container, 
            effect: "fadeIn", 
 
        }).removeClass("lazy"); 
        $imgs.trigger('scroll'); 
 
 
    }); 
    //}); 
}); 

请您参考如下方法:

我解决了。 Working Fiddle

导致失败的问题:

1. Bootstrap 我也必须将 style="width:XX;height:XX"与正常的宽度和高度参数一起放入图像标签中，以覆盖 bootstrap img{} css 定义问题之一。 <img class="lazy" width="200" height="300" style="width: 200px; height: 300px;" data-original="abc.jpg" src="lazygrey.gif">

2. AJAX 之前的 vars: 由于我使用的是 ajax 内容，因此 var 定义如下 var $imgs= $("img.lazy");在ajax调用不起作用之前。所以为了安全起见，我直接使用了 $("img.lazy") 。