Question

我正在尝试延迟加载我使用handlebars.js作为模板引擎从json文件获取的内容。

我想在滚动时延迟加载每个.projects-list div。

这是我的代码。

HTML：

<div class="projects-list">
    <script id="projects-template" type="text/x-handlebars-template">
        {{#each this}}
        <h1>{{name}}</h1>
        <img class="lazy" src="{{image.small}}" height="130" alt="{{name}}"/>
        <img class="lazy" data-src="{{image.small}}" height="130" alt="{{name}}"/>
        {{/each}}
    </script>
</div>

JS：

$(function () {

// Get project data from json file.
$.getJSON("projects.json", function (data) {

    // Write the data into our global variable.
    projects = data;

    // Call a function to create HTML for all the products.
    generateAllProjectsHTML(projects);

});

// It fills up the projects list via a handlebars template.
function generateAllProjectsHTML(data) {

    var list = $('.projects-list');

    var theTemplateScript = $("#projects-template").html();

    //Compile the template
    var theTemplate = Handlebars.compile(theTemplateScript);
    list.append(theTemplate(data));
}

$('.lazy').lazy({
    effect: "fadeIn",
    effectTime: 5000,
    threshold: 0
});

});

JSON：

[
  {
    "id": 1,
    "name": "Example Name 1",
    "image": {
      "small": "assets/images/example1.jpg",
      "large": "assets/images/example2.jpg"
    }
},
  {
    "id": 2,
    "name": "Example Name 2",
    "image": {
      "small": "assets/images/example3.jpg",
      "large": "assets/images/example4.jpg"
    }
  }
]

我正在尝试使用此插件：http://jquery.eisbehr.de/lazy/但我愿意接受任何建议。

感谢您花时间去关注，非常感谢任何帮助！

Answer 1

问题似乎是你的脚本和时间顺序。这将是一场竞赛。您应该在加载模板后立即初始化Lazy。这应该解决这个问题。

您甚至可以压缩脚本。并删除脚本中的jQuery就绪状态，这里不需要它。

所以结果看起来像这样：

$.getJSON("projects.json", function(data) {
    var theTemplateScript = $("#projects-template").html();
    var theTemplate = Handlebars.compile(theTemplateScript);

    $("#projects-list").append(theTemplate(data));

    $(".lazy").lazy({
        effect: "fadeIn",
        effectTime: 5000,
        threshold: 0
    });
});

从模板引擎（把手）延迟加载json数据

1 个答案: