JavaScript Bilder vorladen

Question

Können Sie mir sagen, ob die Funktion, die ich unten geschrieben habe, ausreicht, um Bilder in den meisten, wenn nicht allen heute üblichen Browsern zu laden?

function preloadImage(url) 
{ 
    var img=new Image(); 
    img.src=url; 
} 

Ich habe eine Reihe von imageURLs dass I Schleife und rufen die preloadImage Funktion für jede URL.

Answer 1

Ja. Dies sollte in allen gängigen Browsern funktionieren.

Answer 2

CSS2 Alternative: http://www.thecssninja.com/css/even-better-image-preloading-with-css2

body:after { 
    content: url(img01.jpg) url(img02.jpg) url(img03.jpg); 
    display: none; 
} 

CSS3 Alternative: https://perishablepress.com/preload-images-css3/ (H/T Linh Dam)

.preload-images { 
    display: none; 
    width: 0; 
    height: 0; 
    background: url(img01.jpg), 
       url(img02.jpg), 
       url(img03.jpg); 
} 

HINWEIS: Bilder in einem Behälter mit display:none möglicherweise nicht vorzuladen. Vielleicht Sichtbarkeit: versteckt wird besser funktionieren, aber ich habe das nicht getestet. Danke Marco Del Valle für den Hinweis darauf

Answer 3

Dieser Ansatz ist ein wenig aufwendiger. Hier speichern Sie alle vorgeladenen Bilder in einem Container, eventuell ein div. Und nachdem Sie die Bilder zeigen oder verschieben Sie sie innerhalb des DOM an die richtige Position.

function preloadImg(containerId, imgUrl, imageId) { 
    var i = document.createElement('img'); // or new Image() 
    i.id = imageId; 
    i.onload = function() { 
     var container = document.getElementById(containerId); 
     container.appendChild(this); 
    }; 
    i.src = imgUrl; 
} 

Try it here, ich habe auch einige Kommentare

Answer 4

empfehle ich Ihnen einen try/catch verwenden, um einige mögliche Probleme zu vermeiden:

OOP:

var preloadImage = function (url) { 
     try { 
      var _img = new Image(); 
      _img.src = url; 
     } catch (e) { } 
    } 

Standard:

function preloadImage (url) { 
     try { 
      var _img = new Image(); 
      _img.src = url; 
     } catch (e) { } 
    } 

Auch wenn ich DOM liebe, können alte dumme Browser Probleme mit DOM haben, also vermeide es IMHO im Gegensatz zu Freedevs Beitrag. Image() hat bessere Unterstützung in alten Papierkorb-Browsern.

Answer 5

Versuchen Sie dies, ich denke, das ist besser.

var images = []; 
function preload() { 
    for (var i = 0; i < arguments.length; i++) { 
     images[i] = new Image(); 
     images[i].src = preload.arguments[i]; 
    } 
} 

//-- usage --// 
preload(
    "http://domain.tld/gallery/image-001.jpg", 
    "http://domain.tld/gallery/image-002.jpg", 
    "http://domain.tld/gallery/image-003.jpg" 
) 

Quelle: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Answer 6

Ja, das wird funktionieren, jedoch Browser Grenze (zwischen 4-8) den tatsächlichen Anrufe und somit nicht cache/vorzuladen alle gewünschten Bilder.

Ein besserer Weg, dies zu tun ist onload aufrufen, bevor das Bild wie so mit:

function (imageUrls, index) { 
    var img = new Image(); 

    img.onload = function() { 
     console.log('isCached: ' + isCached(imageUrls[index])); 
     *DoSomething..* 

    img.src = imageUrls[index] 
} 

function isCached(imgUrl) { 
    var img = new Image(); 
    img.src = imgUrl; 
    return img.complete || (img .width + img .height) > 0; 
} 

Answer 7

In meinem Fall war es sinnvoll, einen Rückruf an Ihre Funktion für onload Ereignis hinzuzufügen:

function preloadImage(url, callback) 
{ 
    var img=new Image(); 
    img.src=url; 
    img.onload = callback; 
} 

Und es dann wickeln für Fall einer Anordnung von Urls Bilder mit Rückruf werden vorinstalliert alles getan ist: https://jsfiddle.net/4r0Luoy7/

function preloadImages(urls, allImagesLoadedCallback){ 
    var loadedCounter = 0; 
    var toBeLoadedNumber = urls.length; 
    urls.forEach(function(url){ 
    preloadImage(url, function(){ 
     loadedCounter++; 
      console.log('Number of loaded images: ' + loadedCounter); 
     if(loadedCounter == toBeLoadedNumber){ 
     allImagesLoadedCallback(); 
     } 
    }); 
    }); 
    function preloadImage(url, anImageLoadedCallback){ 
     var img = new Image(); 
     img.src = url; 
     img.onload = anImageLoadedCallback; 
    } 
} 

// Let's call it: 
preloadImages([ 
    '//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg', 
    '//www.csee.umbc.edu/wp-content/uploads/2011/08/www.jpg' 
], function(){ 
    console.log('All images were loaded'); 
}); 

01 Hier

Answer 8

ist mein Ansatz:

var preloadImages = function (srcs, imgs, callback) { 
    var img; 
    var remaining = srcs.length; 
    for (var i = 0; i < srcs.length; i++) { 
     img = new Image; 
     img.onload = function() { 
      --remaining; 
      if (remaining <= 0) { 
       callback(); 
      } 
     }; 
     img.src = srcs[i]; 
     imgs.push(img); 
    } 
};