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.

thanks
willsherwoodAsked:
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

<html>
<head>
<script type="text/javascript">
function loadPdf(img) {
  window.if1.location=img.src.replace('.jpg','.pdf');
}
</script>
</head>
<body>
<img src="bigimage1.jpg" onload="loadPdf(this)" />
<iframe style="display:none" width="1" height="1"></iframe>
</body>
</html>

Open in new window

0
 
experts1Connect With a Mentor Commented:
willsherwood,

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

<html><head><title>PreLoad_PDF</title>
<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
}
</SCRIPT></head>
<body onload="load_pdf();"> 
Original Web Page
<br>
Blah....!
<br>
Blah...!
<br>
Blah...!
<br>
Etc...!
<br>
<br>
<div name="pdf_view" id="pdf_view">

</div>
</body>
</html>

Open in new window

0
 
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
0
 
willsherwoodAuthor Commented:
oh my what great responses!  THANK YOU.
much appreciated.
(correct, PDF after main page, so it wouldn't compete)
thanks!!
0
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.