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

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

这在 dom 就绪时按预期工作，但是我的网站的某些部分使用 AJAX 动态加载。

如何触发 imgix-js 库以在 dom 就绪时加载图像？

4

2 回答 2

3

您需要imgix.fluid在 AJAX 加载完成后调用新内容，传入新内容的父节点以限制新.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()在文档级别调用过，因此将这些新图像单独标记为流体并不完全正确。我们意识到了这个限制，并且会想办法在未来版本的库中让这个工作更好。如果您对如何处理这种行为有具体的想法，您应该发送电子邮件至 jason@imgix.com 给我发电子邮件，我很乐意讨论！

于 2015-05-26T21:00:53.700 回答
-1 
/* imgix parameters */
var watermarkParams = {
      w: 320,
      h: 320,
      fit: 'crop',
      q: 90,
      auto: 'format',
      mark: '/imgix-logo-web.png',
      markalign: 'center,middle',
      markw: 160,
      markalpha: 80,
      markpad: 20
};

/* Construct imgix URL */
var watermarkImage = new imgix.URL('https://assets.imgix.net/examples/mountain.jpg');
watermarkImage.setParams(watermarkParams);
watermarkImage.attachImageTo('#image-example');
于 2015-05-25T19:28:58.723 回答