web-assets/lazyload/v17/UPGRADE.md

🗺 HOW TO UPDATE FROM PREVIOUS VERSIONS

Version 16 to 17

If you were NOT setting the elements_selector option

You should add the lazy class to your lazy images.

<!-- FROM -->
<img data-src="lazyImage.jpg" alt="Lazy image" />
<!-- TO -->
<img class="lazy" data-src="lazyImage.jpg" alt="Lazy image" />

ALTERNATIVELY, you could set the elements_selector option to "img"

const myLazyLoad = new LazyLoad({
  /* other options here */
  elements_selector: "img" // ADD THIS OPTION
});

If you were using cancel_on_exit: true

// From
const myLazyLoad = new LazyLoad({
  /* other options here */
  cancel_on_exit: true // REMOVE THIS OPTION
});

You should remove cancel_on_exit: true from the settings.

---

Love this project? 😍 Buy me a coffee!

---

Version 15 to 16

If you were using the callback_reveal callback

You should replace callback_reveal with callback_loading in your JS code.

If you were using the instance load(element) method

You should replace the load(element) with LazyLoad.load(element, settings)

const myLazyLoad = new LazyLoad({
  /* options here */
});
// FROM
myLazyLoad.load(element);
// TO
LazyLoad.load(element, {
  /* options here */
});

Note that the settings object of the load method can be different. If none are provided, the default options will apply.

If you were using auto_unobserve: false

You should replace auto_unobserve with unobserve_completed.

const myLazyLoad = new LazyLoad({
  // FROM
  auto_unobserve: false,
  // TO
  unobserve_completed: false
});

If you were using the load_delay option

You should change load_delay: ___ with cancel_on_exit: true.

const myLazyLoad = new LazyLoad({
  // FROM
  load_delay: 300,
  // TO
  cancel_on_exit: true
});

---

Love this project? 😍 Buy me a coffee!

---

Version 14 to 15

If you have background images loaded via data-src

You should replace data-src with data-bg in your markup/DOM

<!-- FROM -->
<div data-src="background.jpg">...</div>
<!-- TO -->
<div data-bg="background.jpg">...</div>

ALTERNATIVELY, you could pass src in the data_bg option

new LazyLoad({
  /* other options here */
  data_bg: "src"
});

If you have single background images loaded via data-bg

You must remove the url() part from the data-bg attribute values

<!-- FROM -->
<div data-bg="url(background.jpg)">...</div>
<!-- TO -->
<div data-bg="background.jpg">...</div>

If you have multipe background images loaded via data-bg

You must change the attribute to data-bg-multi

<!-- FROM -->
<div data-bg="url(background1.jpg), url(background2.jpg)">...</div>
<!-- TO -->
<div data-bg-multi="url(background1.jpg), url(background2.jpg)">...</div>

---

Love this project? 😍 Buy me a coffee!

---

Version 13 to 14

If you are using callback_reveal

You should replace it to callback_loading. callback_reveal still works but it will be removed in next versions

// FROM
new LazyLoad({ /* other options? */ callback_reveal: () => {} });
// TO
new LazyLoad({ /* other options? */ callback_loading: () => {} });

---

Love this project? 😍 Buy me a coffee!

---

Version 12 to 13

If you are using callback_set

You should replace it to callback_reveal. callback_set still works but it will be removed in next versions

// FROM
new LazyLoad({ /* other options? */ callback_set: () => {} });
// TO
new LazyLoad({ /* other options? */ callback_reveal: () => {} });