5

用于 ajax 获取的正常同位素使用是有效的。见工作jsfiddle。

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

问题： lazyload 没有触发并一直显示灰色图像。

用于延迟加载设置的 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');


    });
    //});
});
4

1 回答 1

2

我解决了。工作小提琴

导致失败的问题：

  1. 引导程序我必须将 style="width:XX;height:XX" 连同正常的宽度和高度参数一起放入图像标记中，以覆盖引导程序 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 $imgs= $("img.lazy");在 ajax 调用之前定义的 var 不起作用。所以为了安全起见，我直接使用了 $("img.lazy") 。

于 2013-06-23T05:57:21.167 回答