Question

我想在一个<img />标记中加载两个图片。第一个小图片将显示为src属性，第二个大图片将显示在data-src属性中，但一个图片将同时显示，该图片将位于src属性中。我希望当页面加载小图像将被加载并首先显示并且在完成在背景中加载大图像之后它将被小图像替换以便我们可以看到大图像。我的代码将从data-src属性中获取大图像，并将大图像放在src属性中。

$(document).ready(function(){
    $("#image4").load(function(){
        var imgDefer = document.getElementsByTagName('img');
        for (var i=0; i<imgDefer.length; i++) {
            if(imgDefer[i].getAttribute('data-src')) {
                imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
            } }
    });
});

我想这样做，因为我不想等待很长时间才能加载大图像，而我想先看小图像。我在页面加载时遇到问题，它并行加载小图像和大图像。对于您的信息图像具有拖放功能。目前的实时代码位于：http://virtualepark.com/new1/demo.html

Answer 1

您在此处发布的代码未部署在您的服务器上 - 还有其他一些使用mousewheel - 事件的内容。

尝试加载隐藏在背景中的大图像，加载后，设置可见图像的网址：

//get all images
$('img').each(function(i, img) {
 var img = $(img);
 //if they have a data-src
 if(img.attr('data-src')) {
   //register for the load-event for the initial image
   img.one('load', function() {
     //if small image is loaded, begin loading the big image
     //create new hidden image
     var hiddenImg = new Image();
     hiddenImg.onload = function() {
          //if the hidden image is loaded, set the src-attribute of the
          //real image (it will show instantly)
          img.attr('src', img.attr('data-src'));
      };
      //trigger loading of the resource
      hiddenImg.src = img.attr('data-src');
     });
   });
});

（归功于Load image from url and draw to HTML5 Canvas）

Answer 2

你可以加载到隐藏标签，并在加载complet后更改它们。

Answer 3

您可以尝试在加载图像后开始加载。

$('img').load(function(){
    var bigImgSrc = $(this).data('src');
    var img = $(this);

    if(bigImgSrc != img.prop('src')){
      var bigImg =$('<img>').prop('src', bigImgSrc);
      bigImg.load(function(){
        img.prop('src', bigImgSrc);
      });
    }
});

我不能100％确定您是否需要将bigImg附加到DOM，或者它是否也像这样加载。如果您需要将其添加到DOM，请使用bigImg.hide().appendTo('body')，然后在加载时使用删除功能。

您还应该知道加载功能在所有情况下都不起作用，请参阅https://api.jquery.com/load-event/

编辑在prev中的无限循环中。代码示例

一个接一个地在一个img标签中加载两个图像

3 个答案: