javascript - 如何在命令上应用imgix-js？

$(document).ready(function () {
    var imgixOptions = {
        updateOnResizeDown : true,
        updateOnPinchZoom : true,
        fitImgTagToContainerWidth: true,
        fitImgTagToContainerHeight: true,
        autoInsertCSSBestPractices: true,
        pixelStep : 5
    };

    imgix.onready(function() {
        imgix.fluid(imgixOptions);
    });
});

这在dom ready上可以正常工作，但是我的站点的某些部分使用AJAX动态加载。
我如何触发imgix js库以像在dom上一样加载图像？

最佳答案

AJAX加载完成后，您需要对新内容调用imgix.fluid，传入新内容的父节点以限制新.fluid调用的范围。像这样的：

// Store the target that your async content is being inserted into
var $target = $('#target');

// Make your AJAX request
$target.load('new_content.html', function () {
  var imgixOptions = {
    updateOnResizeDown : true,
    updateOnPinchZoom : true,
    fitImgTagToContainerWidth: true,
    fitImgTagToContainerHeight: true,
    autoInsertCSSBestPractices: true,
    pixelStep : 5
  };

  // Call imgix.fluid, passing the target as the rootnode.
  // Note that imgix.fluid expects the rootnode to be an HTMLElement
  // rather than a jQuery collection, so call .get(0) on $target
  imgix.fluid($target.get(0), imgixOptions);
});

我完全认识到，这在目前还不是很直观——您已经在前面的文档级别调用了imgix.fluid()，因此将这些新图像单独标记为流体闻起来不太正确。我们已经意识到了这个限制，并将在未来的库版本中找到一种更好的方法。如果你对如何处理这种行为有具体的想法，你应该发邮件给我[email protected]，我很乐意讨论！

关于javascript - 如何在命令上应用imgix-js？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30444716/