javascript - 按顺序一个接一个地加载图像。

Question

我想在页面加载后使用 JQuery 加载 2 个图像。我想一次请求并加载一张图片。我试过了，但是请求和负载是同时发生的。第一张图片应来自“src”，第二张图片应来自“data-src”html 属性。

<img id="image4" src="image/large.jpg" width="100%" data-src="image/full-size.jpg" />

有人可以帮我解决这个问题吗？

Answer 1

也许这对你有用

$(document).ready(function(){

$('img[data-src]').each(function( key, value ){
    var _this = $(this);
    var bigImage = _this.attr('data-src');        
    _this.after('<img class="preLoadingImage'+key+' hide" src="' + bigImage + '" />');
    
    $('.preLoadingImage'+key).one('load',function(){        
        _this.addClass('hide');
        $(this).removeClass('hide');
    });    
});

});

.hide{ display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image4" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" 
    width="100%" data-src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg" />