My website is structured in a sequential manner, where page1.html leads to page2.html and so on. I am looking to preload some images from the third page onto the second page. After searching, I came across this amazing code snippet:
$.ajax({
url : 'somePage.html',
dataType : "html",
success : function(data) {
$(data).hide().appendTo('#someDiv');
var imagesCount = $('#someDiv').find('img').length;
var imagesLoaded = 0;
$('#someDiv').find('img').load( function() {
++imagesLoaded;
if (imagesLoaded >= imagesCount) {
$('#someDiv').children().show();
}
});
var timeout = setTimeout(function() {
$('#someDiv').children().show();
}, 5000);
}
});
While this code effectively loads all contents of page3.html onto page2.html, I only want to load the images and have them hidden until the user navigates to page3.html. The issue with the above snippet is that it brings along other elements such as audio. So my question is, would this modified version below meet my requirements?
$.ajax({
url : 'page3.html',
dataType : "html",
success : function(data) {
var imagesCount = $(data).find('img').length;
var imagesLoaded = 0;
$(data).find('img').load( function() {
++imagesLoaded;
if (imagesLoaded >= imagesCount) {
//halt? do something?
}
});
}
});
Once again, my goal is to preload images from page3.html onto page2.html. Do you think this approach will work? And how can I conduct a test to confirm?