Question

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

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

有人可以帮我这个吗？

Answer 1

也许这对你有用

＆＃13;

$(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');
    });    
});

});

＆＃13;

.hide{ display:none; }

＆＃13;

<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" />

＆＃13;

Answer 2

如果没有看到你的JS，我相信这就是你想要的：

var img = $("#image4");
var image1Url = img.attr("src");
var image2Url = img.attr("data-src");

$.get(image1Url)
   .done(function () {
      $.get(image2Url);
   });

Answer 3

我不确定你想要这个，但看看

JS：

setTimeout(function(){
  $("#image4").after("<img src='" + $("#image4").attr("data-src") + "' width='100%' />");
  },2000);

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="image4" src="image/large.jpg" width="100%" data-src="image/full-size.jpg" />

按顺序依次加载图像。

3 个答案: