LoginSignup
yoga
@yoga (sage koart)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

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

Q&A
JavaScript

解決したいこと

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

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

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

▼lozad.js
https://github.com/ApoorvSaxena/lozad.js/

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

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

該当するソースコード

<!-- html -->
<div class="thumbnail lozad" data-background-image="/images/***.JPG)" style="background-image: url();" >
    <span class="thumbnail__title target">***文字情報***</span>
</div>
<div class="thumbnail lozad" data-background-image="/images/***.JPG)" style="background-image: url();" >
    <span class="thumbnail__title target">***文字情報***</span>
</div>
<div class="thumbnail lozad" data-background-image="/images/***.JPG)" style="background-image: url();" >
    <span class="thumbnail__title target">***文字情報***</span>
</div>
<div class="thumbnail lozad" data-background-image="/images/***.JPG)" style="background-image: url();" >
    <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>

Lozad.jsのUsage

Lozad.jsのUsage読んでいくと、以下のようにすると要素の読み込み状態によってその後に任意の処理が書けるようで、
ロード後のloadedで処理ができるとよいと思うのですが、やり方が分かりません。。

<script>
lozad('.lozad', {
    loaded: function(el) {
        // Custom implementation on a loaded element
        el.classList.add('loaded');
    }
});
</script>

自分で試したこと

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 src="/js/background-check.min.js"></script>

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

5Answer

mogamoga1337
@mogamoga1337

すみません。回答のサンプルコード、Lozad.jsの書き方だとsrcではなくてdata-srcが正しいので間違っていました。
これだとどうでしょう。

const observer = lozad('.lozad', {
    loaded: function(el) {
        BackgroundCheck.init({
            targets: 'span',
            images: '.lozad',
            minComplexity: 10
        });
    }
});
observer.observe();
1
mogamoga1337
@mogamoga1337

elは画像を読み込んだ箇所のElementオブジェクトが入っています。
特に使わないので何もいじっていないです。
とりあえずimgタグで動くコードを書きました。
background-imageの方法でコンソールにエラーがでていましたか？
でていないなら原因はちょっと分からないです・・・

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <style>
        div {
            position: relative;
            width: 720px;
            height: 494px;
            /* background-size: contain; */
        }

        div span {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 40px;
            color: gray;
        }

        div span.background--light {
            color: black;
        }

        div span.background--dark {
            color: white;
        }

        div span.background--complex {
            color: gray;
        }

        div img {
            width: 100%;
        }
    </style>
    <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 src='https://cdnjs.cloudflare.com/ajax/libs/background-check/1.2.2/background-check.min.js'
        integrity='sha512-dkV9Dwby6ldcynOXgIjPMkncOLYgeXZ7xwFdNsdwA6veOm/eSgP/qQMzvZwyZH1+V66dDWGXMpFGp9svcDZwjA=='
        crossorigin='anonymous'></script>
</head>

<body>
    <div>
        <img class='lozad' crossorigin="anonymous" data-src="https://apoorv.pro/lozad.js/demo/images/thumbs/12.jpg" alt="">
        <span>hogehoge</span>
    </div>

    <script>
    BackgroundCheck.init({
        targets: 'span',
        minComplexity: 10
    });
    const observer = lozad('.lozad');
    observer.observe();
    </script>
</body>

</html>
1
mogamoga1337
@mogamoga1337

とりあえずimgタグなら動かすことができた（と思う。）

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <style>
    div {
        position: relative;
        width: 720px;
        height: 494px;
    }
    div span {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 40px;
        color: gray;
    }
    div span.background--light {
        color: black;
    }
    div span.background--dark {
        color: white;
    }
    div span.background--complex {
        color: gray;
    }
    div img {
        width: 100%;
    }
    </style>
    <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 src='https://cdnjs.cloudflare.com/ajax/libs/background-check/1.2.2/background-check.min.js' integrity='sha512-dkV9Dwby6ldcynOXgIjPMkncOLYgeXZ7xwFdNsdwA6veOm/eSgP/qQMzvZwyZH1+V66dDWGXMpFGp9svcDZwjA==' crossorigin='anonymous'></script>
</head>
<body>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/01.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/02.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/03.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/04.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/05.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/06.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/07.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/08.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/09.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/10.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/11.jpg">
        <span>hogehoge</span>
    </div>
    <div class='lozad'>
        <img crossorigin="anonymous" src="https://apoorv.pro/lozad.js/demo/images/thumbs/12.jpg">
        <span>hogehoge</span>
    </div>
    <script>
    BackgroundCheck.init({
        targets: 'span',
        minComplexity: 10
    });

    const observer = lozad('.lozad');
    observer.observe();
    </script>
</body>
</html>
0

Comments

  1. @mogamoga1337

    どうしてもbackground-imageで画像を読み込みたいなら
    BackgroundCheck.initのオプションにimagesを追加してください。
    質問者さんのコードの場合は
    BackgroundCheck.init({
    　　targets: 'span',
    　　images: '.thumbnail'
    });
    という形式になります。（↑をコピペする場合は全角を半角にして！！！）
    これは
    https://github.com/kennethcachia/background-check
    ##CSS Backgrounds
    の箇所に書かれています。
    これでも動かん！っていう場合はF12で開ける開発者ツールのコンソールを見てください。
    クロスドメイン関係のエラーが発生して処理が行われていない可能性もあります。

  2. @mogamoga1337

    Lozad.jsは
    const observer = lozad('.lozad');
    observer.observe();
    の形式で問題ないと思われます。
    Background-check.jsが画像を監視しており
    スクロールなどで画像が画面に表示されると自動で処理が発火するようなので
    画像が存在する前にBackgroundCheck.initしているのが悪い！とは思えないです。

  3. @yoga

    Questioner
    さっそくご回答いただき誠に有り難うございます。

    ご提供いただいたサンプルコードを実際にテストしてみたところ、たしかにimgタグならば正常にbackgroud-checkが動作しました。

    しかし、同様のコードをbackground-imgに変更したところ、やはりダメでした。
    修正箇所は以下の通りで、ご指摘の通りBackgroundCheckのinitに、images:'.lozad'を追加も行ったのですが。。。

    デモをブラウザで確認すると、スクロールして画像がディスプレイ内に入り込むと、ほんの一瞬（0.1秒ほど）background-checkが効いて暗い画像だと白い文字が見えたようにも見えますが、すぐに効かなくなる感じなので、lozadの挙動としてディスプレイ内に該当画像が入り込んで'true'になると、空欄にしてあるstyle="background-image: url();に書き加えるっぽいので、その辺りが影響しているのかなあと推測しておりますが、間違っているかもしれません。

    できればbackground-imageのままで、なんとか進めたいので、もしお気づきの点があればご教授いただけると助かります。なお、F12でエラーは出ておりませんでした。

    ```
    <div class='lozad' data-background-image="https://apoorv.pro/lozad.js/demo/images/thumbs/12.jpg" style="background-image: url();">
    <span>hogehoge</span>
    </div>

    <script>
    BackgroundCheck.init({
    targets: 'span',
    images: '.lozad',
    minComplexity: 10
    });

    const observer = lozad('.lozad');
    observer.observe();
    </script>

    ```
yoga
@yoga

さっそく有り難うございます！
しかしテストしてみましたが、やはり動作しませんでした。。
ちなみに、この場合の(el)は、そのままで良いのでしょうか？何かを入れますか？
（何度も恐縮です）

0
yoga
@yoga

@mogamoga1337 さん本当に有り難うございました。大感謝です！
結局のところBackground-imageでは動作しませんでしたが、imgに変更するかlazyload以外の遅延読込を試してみます。貴重なお時間を頂戴しまして有り難うございます。

0

Your answer might help someone💌

LoginSign Up

Popular Questions