È inoltre in grado di fornire una funzione che sostituisce semplicemente il tag img dal div/background in modo da beneficiare sia dell'attributo onload che della flessibilità del div.
Naturalmente, è possibile perfezionare il codice per adattarlo al meglio alle proprie esigenze, ma nel mio caso, mi assicuro anche che la larghezza o l'altezza siano preservate per un migliore controllo di ciò che mi aspetto.
mio codice come segue:
<img src="imageToLoad.jpg" onload="imageLoadedTurnItAsDivBackground($(this), true, '')">
<style>
.img-to-div {
background-size: contain;
}
</style>
<script>
// Background Image Loaded
function imageLoadedTurnItAsDivBackground(tag, preserveHeight, appendHtml) {
// Make sure parameters are all ok
if (!tag || !tag.length) return;
const w = tag.width();
const h = tag.height();
if (!w || !h) return;
// Preserve height or width in addition to the image ratio
if (preserveHeight) {
const r = h/w;
tag.css('width', w * r);
}
else {
const r = w/h;
tag.css('height', h * r);
}
const src = tag.attr('src');
// Make the img disappear (one could animate stuff)
tag.css('display', 'none');
// Add the div, potentially adding extra HTML inside the div
tag.after(`
<div class="img-to-div" style="background-image: url(${src}); width: ${w}px; height:${h}px">${appendHtml}</div>
`);
// Finally remove the original img, turned useless now
tag.remove();
}
</script>
fonte
2017-10-23 12:23:25
Per qualche strano motivo l'onload solo incendi quando l'imageLocation ha effettivamente un po 'di tempo per caricare, come dal web. Non funziona nei test locali con 0 tempo di caricamento. – thedp
potresti impostare un timeout per 'bgImg.src = imageLocation;', ma suppongo che la maggior parte delle persone non sia sul tuo computer,: P –
Questo in realtà ha un bug quando 'bgImg.src' contiene caratteri speciali come virgolette singole e doppie e backslash. Invece dovresti renderlo ''url ("' + bgImg.src.replace ("\\", "\\\\"). Replace ('"' ',' \\" '+ + "")'; ' . Penso che dovrebbe sfuggire qualsiasi URL correttamente. –