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

Posted on 2009-12-16
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
    LVL 75

    Accepted Solution

    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

    LVL 9

    Assisted Solution


    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

    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

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

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    "That which we persist in doing becomes easier, not that the task itself has become easier, but that our ability to perform it has improved." Ralph Waldo Emerson Introduction: One of the wonderful things about the web is that it makes it s…
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    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…

    754 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

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now