deblan.io-murph/assets/js/app/px-image.js

class PxImage {
    constructor(w) {
        this.window = w
    }

    init() {
        const doc = this.window.document

        const images = doc.querySelectorAll('.quick-image img, .card figure img')

        for (let i = 0, len = images.length; i < len; i++) {
            ((image) => {
                const source = image.getAttribute('data-src')
                const sourceError = image.getAttribute('data-src-error')
                const color = image.getAttribute('data-color')
                const loader = new Image()

                loader.onload = () => {
                    image.style.background = `${color ? color : null} url(${source})`
                    image.style.backgroundSize = 'cover'
                    image.style.backgroundPosition = 'center'
                }

                loader.onerror = () => {
                    image.style.background = `${color ? color : null} url('${sourceError}') center center`
                }

                loader.src = source
            })(images[i])
        }
    }
}

module.exports = PxImage