Question

我正在页面上（从文件路径）加载一些图像，这些图像可能很重，因此我创建了.min版本，并尝试先加载缩影，然后在就绪时加载原始图像。

但是我似乎无法渲染原始文件。

这是我要实现的目标：

<View style={{ width: screenWidth, position: 'relative' }}>
    {
        this.state.waveforms.map((waveform, i) => {
            return (
                <View
                    key={waveform.key}
                    style={{
                        position: 'absolute',
                        top: WAVE_FORM_MAX_HEIGHT - waveform.value + (waveform.value / 2) - WAVE_FORM_MAX_HEIGHT,
                        left: screenWidth - (i * TOTAL_WAVE_FORM_WIDTH),
                        width: WAVE_FORM_MAX_WIDTH,
                        height: waveform.value,
                        backgroundColor: '#CC0000',
                        borderRadius: 2
                    }}
                />
            )
        })
    }
</View>

<script>
$(document).ready(function () {
    [].forEach.call(document.querySelectorAll('img[data-src]'), function (img) {
        img.setAttribute('src', img.getAttribute('data-src'));
        img.onload = function () {
            img.removeAttribute('data-src');
        };
    });
});

来自src的缩图可以正确加载，但是不会加载data-src原始文件。这是因为我正在动态加载图像吗？

我使用存储文件名和路径的SQL DB提取图像。

是否可以克服这个问题？

Answer 1

您要在一个空数组上调用.forEach，因此不会进行任何处理。您将需要对具有data-src属性的所有图像进行操作：

$(document).ready(function () {
    document.querySelectorAll('img[data-src]').forEach(function (img) {
        img.setAttribute('src', img.getAttribute('data-src'));
        img.onload = function () {
            img.removeAttribute('data-src');
        };
    });
});

在ASP.NET C＃中的图像加载上加载临时图像

1 个答案: