jQuery backstretchでリサイズ時に画像を切り替える方法

Question

backstretchプラグインを使用して、以下のコードでスマホとPCで画像を切り替えています。

↓プラグイン公式サイト
http://www.jquery-backstretch.com/

$(function(){
	var windowWidth = window.innerWidth;
	if (windowWidth >= 768) {
		$(".home-hero").backstretch([
			"img/home/hero/hero1.jpg",
			"img/home/hero/hero2.jpg",
			"img/home/hero/hero3.jpg"
		], {duration: 5000, fade: 1200});
	} else {
		$(".home-hero").backstretch([
			"img/home/hero/hero1-sp.jpg",
			"img/home/hero/hero2-sp.jpg",
			"img/home/hero/hero3-sp.jpg"
		], {duration: 5000, fade: 1200});
	}
});

上記記述の場合、リサイズ時には画像は切り替わりません。
リサイズ時にも画像が切り替わるようにしたく、いくつか試したのですが上手くいきませんでした。

試した記述 1

$(function(){
	$(window).on('load resize', function() {
		var windowWidth = window.innerWidth;
		if (windowWidth >= 768) {
			$(".home-hero").backstretch([
				"img/home/hero/hero1.jpg",
				"img/home/hero/hero2.jpg",
				"img/home/hero/hero3.jpg"
			], {duration: 5000, fade: 1200});
		} else {
			$(".home-hero").backstretch([
				"img/home/hero/hero1-sp.jpg",
				"img/home/hero/hero2-sp.jpg",
				"img/home/hero/hero3-sp.jpg"
			], {duration: 5000, fade: 1200});
		}
	});
});

試した記述 2

document.addEventListener('DOMContentLoaded', function () {
	$(function(){
	
	  var mql = window.matchMedia('screen and (min-width: 768px)');

	  function checkBreakPoint(mql) {
		if (mql.matches) {
		  // PC向け
			$(".home-hero").backstretch([
				"img/home/hero/hero1.jpg",
				"img/home/hero/hero2.jpg",
				"img/home/hero/hero3.jpg"
			], {duration: 5000, fade: 1200});
		} else {
		  // スマホ向け
			$(".home-hero").backstretch([
				"img/home/hero/hero1-sp.jpg",
				"img/home/hero/hero2-sp.jpg",
				"img/home/hero/hero3-sp.jpg"
			], {duration: 5000, fade: 1200});
		}
	  }

	  mql.addListener(checkBreakPoint);

	  checkBreakPoint(mql);
	});
});

どちらも、読み込み時は正常に動作しますが、リサイズするとPC用とスマホ用の画像が混じって表示されてしまいます。
解決法はありますでしょうか？

Comments

[kei344]

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

Answer 1

切り替える前に.backstretch("destroy", preserveBackground)で解除しておかないと2重になるのでは。

【GitHub - jquery-backstretch/jquery-backstretch: Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes.】
https://github.com/jquery-backstretch/jquery-backstretch#slideshow-api

Comments

[asako-]

回答ありがとうございました。
試した記述 1で
$(window).on('load resize', function() {
の上に、
$('.home-hero').backstretch("destroy", preserveBackground);
を記述しましたが、
Uncaught ReferenceError: preserveBackground is not defined
とコンソールにエラー表示があり、背景画像も表示されなくなってしまいました。

試した記述 2でも同様のエラーになってしまいました。。

[kei344]

.backstretch("destroy") か .destroy() ではどうでしょう。