javascript - Precarga de imágenes en HTML

jquery image-preloader

Question

Quiero precargar estas 4 imágenes. Intenté esto:

<img src="img/1.jpg" style="display:none">
<img src="img/1a.jpg" style="display:none">
<img src="img/1b.jpg" style="display:none">
<img src="img/1c.jpg" style="display:none">

No funcionó, así que intenté esto en su lugar:

new Image().src = "img/1.jpg";
new Image().src = "img/1a.jpg";
new Image().src = "img/1b.jpg";
new Image().src = "img/1c.jpg";

El método JS funcionó con el fondo pero no con estos.

Answer 1

En lugar de configurar las imágenes para display: none; , colóquelo en el contenedor.

CSS:

.preload {
display: none;
}

HTML:

<div class="preload">
<img src="img/1.jpg">
<img src="img/1a.jpg">
<img src="img/1b.jpg">
<img src="img/1c.jpg">
</div>

Answer 2

Esto nunca agrega nada al DOM, utilicé una matriz para mantener referencias de las imágenes creadas y pasarlas a una devolución de llamada opcional

var paths = [
"img/1.jpg",
"img/1a.jpg",
"img/1b.jpg",
"img/1c.jpg"
];
preloadImages(paths);
function preloadImages(paths, callback) {
var images = [];
var loaded = 0;
paths.forEach(function (path) {
var img = new Image();
img.src = path;
img.onload = onImagePreloaded;
images.push(img);
});
function onImagePreloaded() {
loaded++;
if (loaded === paths.length && callback) {
callback(images);
}
}
}

Answer 3

Intente utilizar $.Deferred() , .queue()

var images = ["http://lorempixel.com/1200/800/cats/"
, "http://lorempixel.com/1200/800/nature/"
, "http://lorempixel.com/1200/800/animals/"
, "http://lorempixel.com/1200/800/technics/"
];
// do stuff when image loaded
var loadImage = function loadImage(elem) {
return $(elem).fadeTo(500, "1.0", "linear");
};
// load images
var loadImages = function loadImages(urls, image, complete) {
// `this` : `document`
urls.forEach(function(imageSrc, i) {
var img = new Image;
var dfd = new $.Deferred();
// return `this` : `document`
dfd.then(function(ready) {
loadImage(ready);
return this
}, function(error) {
console.log(error)
})
.always(function() {
console.log(complete, urls.length);
return urls.length === complete
? $(this)
.data("complete", complete + " images loaded")
.dequeue("images") // when all images loaded
: this
});
// log errors
img.onerror = dfd.reject;
img.onload = function(e) {
complete = this.complete ? ++complete : complete;
dfd.resolveWith(document, [
image.eq(i).prop("src", this.src)
]
);
};
img.src = imageSrc
});
// return `this` : `document`
return this
};
$(window).load(function() {
// init `loadImages`
var complete = 0;
// call `loadImages`,
// `this` context : `document`
loadImages.call(document, images, $(".image"), complete)
});
$(document).ready(function() {
// notify when all images loaded
$(this).queue("images", function() {
console.log($(this).data())
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<!-- note , `src` attribute not included -->
<img class="image" style="opacity:0.0" alt="1">
<img class="image" style="opacity:0.0" alt="1a">
<img class="image" style="opacity:0.0" alt="1b">
<img class="image" style="opacity:0.0" alt="1c">