Question

如何阻止下面的jQuery each（）函数加载图像？

模式窗口打开后，我将按照以下方式加载图像：

HTML：

<img data-src='image1.jpg'/>
<img data-src='image2.jpg'/>
<img data-src='image3.jpg'/>

jQuery：

$('img[data-src]').each(function(){
    var imgsrc = $(this).attr('data-src');
    $(this).attr('src',imgsrc).on('load',function(){
        $(this).removeAttr('data-src');
    });
});

这很好用，但是我想在关闭模态时放弃它。最好的方法是什么？

问题在于，在模态中选择图像时，正在加载更大的尺寸。但是直到模态中的所有图像都加载完成后，该图像才会出现。

Answer 1

如果我正确理解您的问题。所以解决方案可能是这样的：

var modal = $('.modal');

var onshown = function () {
    for (var img of Array.from(modal.find('img')).map(x => $(x))) {
        var source = img.data('src');
        // or
        // var source = img.attr('data-src');

        var image = new Image();

        image.onload = function () {
            // the image with the source is loaded successful
            img.attr('src', source);

            // or
            // img.prop('src', source);

            // remove the "data-src" attribute

            img.removeAttr('data-src');

            // or
            // img.attr('data-src', undefined);
        };

        image.src = source;
    }
};

modal.on('shown.bs.modal', onshown).modal();

通过使用for循环而不是$.fn.each，您可以随时使用break或return关键字来停止。

有关事件shown.bs.modal的更多信息。

希望这会有所帮助！

如何阻止图像由jQuery each（）加载？

1 个答案: