Laden Sie zwei Bilder in einem einzigen IMG-Tag nacheinander

Ich möchte zwei Bilder in einem einzigen <img />-Tag laden. Das erste kleine Bild wird durch das Attribut src angezeigt, das zweite große Bild befindet sich innerhalb des Attributs data-src, aber es wird sofort ein Bild angezeigt, das im Attribut src enthalten ist. Ich möchte, wenn Seite laden kleines Bild wird geladen und zeigen zuerst und nach dem Laden von großen Bild im Hintergrund wird es durch kleine Bild ersetzt, so dass wir großes Bild sehen können. Ich habe den Code, der großes Bild von data-src Attribut nehmen und großes Bild in src Attribut setzen wird.Laden Sie zwei Bilder in einem einzigen IMG-Tag nacheinander

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

Ich möchte, dies zu tun, weil ich will nicht für lange Zeit warten großes Bild zu laden, anstatt Ich mag zuerst das kleine Bild sehen. Ich stehe vor dem Problem, wenn Seiten geladen werden, es lädt kleine und große Bilder parallel. Zu Ihrer Information haben Bilder die Ziehen- und Zoomfunktion. Aktueller Live-Code ist hier: http://virtualepark.com/new1/demo.html

Quelle

2016-07-08 Rohit Chaudhary

Sie können das nicht tun. Bild-Tags sind selbstschließend und nehmen nur ein einziges 'src' Attribut/ –

, da die Frage mit jquery und Javascript markiert ist, ist es möglich, die Bilder zu laden @Paulie_D – fehrlich

Der Code, den Sie hier gepostet haben, wird nicht auf Ihrem Server bereitgestellt - es gibt noch andere Dinge, die das mousewheel-Ereignis verwenden.

Versuchen Sie das große Bild im Hintergrund versteckt Laden und sobald seine geladene, stellen Sie die URL des sichtbaren Bildes:

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

(Kredite Load image from url and draw to HTML5 Canvas)

Quelle

2016-07-08 09:37:49

Danke Johannes, aber beide Bilder beginnen parallel zu laden. Ich möchte, dass ein großes Bild geladen wird, nachdem das kleine vollständig geladen wurde. –

@RohitChaudhary Ich habe das Skript erweitert, um dieses Verhalten zu erreichen, aber ich denke nicht, dass dies der beste Weg ist. Das große Bild sollte so schnell wie möglich geladen werden. –

Danke, es funktioniert !!! –

Sie versteckt Tag laden und nach laden Sie sie komplett ab.

Quelle

2016-07-08 09:37:51

Sie können versuchen, das Laden zu starten, nachdem das Bild geladen wurde.

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

Ich bin nicht 100% sicher, ob Sie die bigImg auf das DOM anhängen müssen oder wenn es lädt auch so. Wenn Sie es zum DOM hinzufügen müssen, verwenden Sie bigImg.hide().appendTo('body') und verwenden Sie dann die remove funtion, wenn Sie geladen werden.

Sie sollten sich auch bewusst sein, dass die Last-Funktion in allen Fällen nicht funktionieren, siehe https://api.jquery.com/load-event/

bearbeiten es in einer unendlichen Schleife im i.Vj. war. Codebeispiel

Quelle

2016-07-08 12:02:27 fehrlich

Laden Sie zwei Bilder in einem einzigen IMG-Tag nacheinander

Antwort

Verwandte Themen