如何在命令中应用 imgix-js？

Question

$(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 准备就绪时的方式加载图像？

Answer 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');

Answer 2

需要在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()，因此将这些新图像独立标记为流畅的感觉不太对.我们知道这个限制，并且会想办法在未来版本的库中使它更好地工作。如果您对如何处理这种行为有具体的想法，请发送电子邮件至 jason@imgix.com 我很乐意与您讨论！

如何在命令中应用 imgix-js？

How to apply imgix-js on command?

javascript

html

ruby-on-rails

imgix-js

imgix