Although not addressing all the specific details mentioned by the original poster, the following method may prove beneficial to others. This technique has been tested successfully in Chrome 97, Firefox 96, Android 11, and iOS 15.
The setup involves a div with certain CSS properties...
#div_image {
background-image: url( [Path to low-res image] );
background-size: cover;
}
In addition, there is a corresponding class defined as follows...
.div_image_highres {
background-image: none !important;
}
This class includes a pseudo-element specified as such:
.div_image_highres::before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: " ";
background-image: url( [Path to highres image] );
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
opacity: 1;
display: block;
}
Furthermore, an img element is utilized to reference the high-resolution image...
<img id="img_highres_preload" src=" [Path to high-res image ] ">
A corresponding styling for the img element allows it to be loaded (to ensure file loading) without being visible...
#img_highres_preload {
width: 1px;
height: 1px;
}
Two notes to consider: (1) Various methods exist for pre-loading images, but this particular approach is preferred. (2) Refer to the addendum regarding the reliability of the load event.
Lastly, a jQuery script handles the addition of the "high-res" class to the "div_image" once the high-resolution file is fully loaded...
$(document).ready(function() {
$("#img_highres_preload").off().on("load", function() {
$("#div_image").addClass("div_image_highres");
});
});
While vanilla JavaScript can accomplish the same task, using jQuery ensures consistency across the codebase.
Summary of the Process:
- The low-resolution image loads first and serves as the initial background for the div. Even if this step doesn't happen, the procedure remains effective (i.e., showcasing the high-resolution image).
- Upon successful loading of the high-resolution image in the img element, triggering the addition of the "div_image_highres" class to "div_image".
- As a result, the transition to the high-resolution image occurs smoothly without any flashing effects. Occasionally, a slight shift might occur, but it's usually unnoticeable or non-disruptive.
- The primary reason behind adopting this method is for seamless transitions between multiple panels in the application, preventing flickering when hiding and displaying divs containing images.
Insights on the Load Event:
Relying solely on the load event can be problematic, especially in scenarios where images are cached by the browser. To address this issue, a modification is made to the document.ready event to incorporate additional checks:
$(document).ready(function() {
positionOnPage(true);
$("#img_highres_preload").off().on("load", function() {
checkImage();
});
});
checkImage = function() {
var image = $("#img_highres_preload")[0];
if (!image.complete || (typeof image.naturalWidth != "undefined" && image.naturalWidth == 0)) {
console.log("Waiting for high-res image.");
}
else if (!$("#div_home").hasClass("div_home_highres")) {
$("#div_home").addClass("div_home_highres");
$("#img_highres_preload").remove();
}
}
By implementing the checkImage function, the script verifies the image status before applying changes. While this particular example might seem redundant given the initial image loading confirmation, it ensures robust handling of potential loading irregularities.
For more dynamic scenarios, checkImage could be invoked based on different triggers within the codebase, allowing for comprehensive image validation prior to display.
Keep in mind that this simplified version suits basic needs like transitioning from low-res to high-res images, while a more advanced implementation would cater to multi-image loading requirements at the outset.