РЕАКТ: Как изменить источник изображения в зависимости от его масштаба? - PullRequest
Новая
       16

РЕАКТ: Как изменить источник изображения в зависимости от его масштаба?

0 голосов
/ 24 февраля 2020

Доброе утро всем!

В настоящее время я пытаюсь изменить источник изображения в соответствии с его масштабом?

Например, когда масштаб моего изображения достигает 1.5, источник изображения меняется на изображение более высокого качества.

Проблема, с которой я столкнулся, заключается в том, что изменение масштаба и загрузка изображений - это две разные функции, с которыми я не могу связаться (или я могу загрузить изображение, но у меня есть много времени, чтобы загрузить его, прежде чем оно появится).

Итак, мой вопрос: можно ли изменить источник изображения, загрузив его с начала страницы и соответственно к его масштабу?

Я поместил свои 2 функции чуть ниже.

Спасибо за вашу помощь.

PS: Проект очень большой, я могу показать вам только эти функции (или на пределе все компоненты).

loadImages: 

loadImages = (frames, size) => {
        this.setState({
            ready: false,
            loaded: 0
        })
        for (let i = 0; i < this.numberOfFrames; i += 1) {
            const {images} = this.state
            const img = new Image()
            const imgFull = new Image()
            img.onload = () => {
                const {loaded} = this.state
                this.setState({loaded: loaded + 1, ready: loaded + 1 >= this.numberOfFrames})
            }
            imgFull.onload = () => {
                const {loaded} = this.state
                this.setState({loaded: loaded + 1, ready: loaded + 1 >= this.numberOfFrames})
            }
            imgFull.src = frames[i].replace('1920', 3840)
            img.src = frames[i].replace('1920', size)
            images[i] = img
            this.setState({ images })
        }
    }

изменение: 

change = (event, value) => {
        const {initialScale} = this.state
        const { frames } = this.props
        let finalValue = value
        if (value == null || value === 'undefined') {
            finalValue = 0.5
        } else if (value < initialScale) {
            finalValue = initialScale
        }
        this.setState({
            testScale: finalValue
        })

    }
...