JS: preload a PDF file AFTER current page and images complete loading/displaying

I have a database catalog page dipslay situation where we have a large jpeg image (~100K) that is by default showing as the main element of the page.
Then we have a PDF (for more clarity or enlargement) (some are 500K in size)  that can be displayed (using a JS script) upon click of an ENLARGE/DETAIL button.
What (html or JS) code can i put in to have the PDF be preloaded, but ONLY AFTER the main image completes?  A strategy of a simple time delay is fine if there's no JS mechanism to wait-for-page-display-completion.
By having the PDF "in the wings"  then it would display quickly once called upon.

Who is Participating?
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Try this. I exclude mac since it will load the pdf externally
I assume the jpg is called exactly the same as the pdf

<script type="text/javascript">
function loadPdf(img) {
<img src="bigimage1.jpg" onload="loadPdf(this)" />
<iframe style="display:none" width="1" height="1"></iframe>

Open in new window

experts1Connect With a Mentor Commented:

The code below does as follows:

(1) Use an image object to pre-load a PDF file
(2) Begin to pre-load PDF file and render button object, after document is fully loaded
(3) Allows user to view PDF file after popup message

<SCRIPT language=JavaScript type=text/javascript>
var image1 = new Image();  //Define image object to pre-load file
var btPDF;
btnPDF = "<INPUT type='button' value='<View PDF File>' ";
btnPDF = btnPDF + "name ='button1' onClick='view_pdf();'>";

function load_pdf() 
//This function pre-loads pdf file after original document is loaded
image1.src = "Your_PDF_File.pdf" //Your PDF URL Goes Here
//Display button to view PDF file
document.getElementById("pdf_view").innerHTML = btnPDF;

function view_pdf()
alert("You Are About To View A PDF File")
window.location.href =image1.src  //View the preloaded
<body onload="load_pdf();"> 
Original Web Page
<div name="pdf_view" id="pdf_view">


Open in new window

Michel PlungjanIT ExpertCommented:

willsherwood wanted the PDF to begin preloading after the big image had finished loading
Also I did not make any assumptions on where the ENLARGE button would show the pdf
willsherwoodAuthor Commented:
oh my what great responses!  THANK YOU.
much appreciated.
(correct, PDF after main page, so it wouldn't compete)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.