【JSプラグインの競合問題】IntersectionObserveの遅延読み込みライブラリ「Lozad.js」後に「Background-check.js」を効かせたいのですが・・・

Question

前提・実現したいこと

PHPで動的に多くの写真画像が閲覧できるWEBサービスを作っています。
トップページにサーバーより書き出される画像サムネイルに対して、
background-check.js というプラグインを利用して、画像の上に表記される
テキスト情報（写真作品名など）の文字色を、背景画像の色に合わせ
＜暗い画像（文字色：白）、明るい画像（文字色：黒）＞に変化させておりました。

▼background-check.js
http://www.kennethcachia.com/background-check/

ところが、画像が多くサイトの表示パフォーマンスが悪いので
後からLozad.jsで遅延読込を組み込んだところ、
background-check.js が効かなくなってしまいました。

JS初心者のため、この場合の解決方法を教えて頂けますと大変助かります。

どうぞよろしくお願いいたします。

該当のソースコード

<!-- html -->
<div class="thumbnail" style="background-image: url(/images/***.JPG)">
    <span class="thumbnail__title target">***文字情報***</span>
</div>
<div class="thumbnail" style="background-image: url(/images/***.JPG)">
    <span class="thumbnail__title target">***文字情報***</span>
</div>
<div class="thumbnail" style="background-image: url(/images/***.JPG)">
    <span class="thumbnail__title target">***文字情報***</span>
</div>
<div class="thumbnail" style="background-image: url(/images/***.JPG)">
    <span class="thumbnail__title target">***文字情報***</span>
</div>
    :
    :

<!-- Lozad.js -->
<script src="https://polyfill.io/v2/polyfill.min.js? features=IntersectionObserver"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
	const observer = lozad();
	observer.observe();
</script>

<!-- Background-check.js -->
<script src="/js/background-check.min.js"></script>
<script>
BackgroundCheck.init({
    targets: '.target',
});
</script>

Answer 1

競合というより、対象の要素がロードされてない状態でBackgroundCheckのinit()を呼び出しているからだと思います。
画面上に要素が存在してない状態　ということですね。

Lozad.jsのUsage読んでいくと、要素の読み込み状態によってその後に任意の処理が書けるようです。

今回「ロード後」だとloadedでしょうか。

If you would like to extend the loaded state of elements, you can add the loaded option:

Note: The "data-loaded"="true" attribute is used by lozad to determine if an element has been previously loaded.

このloadedのイベントでBackgroundCheckのinit()を呼び出してみてください。

Comments

[kbart23g]

さっそくのご回答いただき誠に有り難うございます。いろいろとトライしてみましたが、基礎理解が乏しいので解決しておりません。以下を試しましたが、これでは上手くいきませんでした。もし追加でアドバイスいただけると大変ありがたいです。

<script>
document.addEventListener('DOMContentLoaded', function() {
const observer = lozad('.lozad', {
// 表示されるときに Background-check を使用する
loaded: function(div) {
BackgroundCheck.init({
targets: '.target',
})
}
})
observer.observe()
})
</script>