Как применить 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 ready, однако некоторые части моего сайта загружаются динамически с использованием AJAX.

Как я могу запустить библиотеку imgix-js для загрузки изображений, как это делается на DOM Ready?

Answer 1

Вам нужно будет позвонить 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() на уровне документа ранее, поэтому маркировка этих новых изображений как жидкости независимо не пахнет совсем неправильно. Мы знаем об этом ограничении и найдем способ улучшить эту работу в будущей версии библиотеки. Если у вас есть конкретные идеи о том, как, по вашему мнению, следует обращаться с таким поведением, напишите мне по адресу [e-mail], и я буду рад обсудить!

Answer 2

/* 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');