Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2009-12-16
Medium Priority
Last Modified: 2012-05-08
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.

Question by:willsherwood
  • 2
LVL 75

Accepted Solution

Michel Plungjan earned 1000 total points
ID: 26078233
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


Assisted Solution

experts1 earned 1000 total points
ID: 26078578

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

LVL 75

Expert Comment

by:Michel Plungjan
ID: 26078715

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

Author Closing Comment

ID: 31666912
oh my what great responses!  THANK YOU.
much appreciated.
(correct, PDF after main page, so it wouldn't compete)

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question