#1
  1. No Profile Picture
    Gone PHP Crazy
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    393
    Rep Power
    12

    PHP equivalent of javascript


    I am trying to convert the following javascript code to php so I can design something similar in php
    Code:
    <html>
    <head>
    <title>cycling banner ads</title>
    <script type="text/javascript">
    if (document.images)
    {
        adImages = new Array("hosts/mit.gif",
                    "hosts/inria.gif", "hosts/keio.gif");
        adURLs = new Array("www.lcs.mit.edu",
                    "www.inria.fr", "www.keio.ac.jp");
        thisAd = 0;
    }
    
    function cycleAds()
    {
        if (document.images)
        {
            if (document.adBanner.complete)
            {
                if (++thisAd == adImages.length)
                    thisAd = 0;
    
                document.adBanner.src = adImages[thisAd];
            }
        }
    
        // change to next sponsor every 3 seconds
        setTimeout("cycleAds()", 3000);
    }
    
    function gotoAd()
    {
        document.location.href = "http://" + adURLs[thisAd];
    }
    </script>
    </head>
    <body onload="cycleAds()">
    ...
    
    <a href="javascript:gotoAd()"><img name="adBanner"
    src="hosts/mit.gif" border="0" alt="Our sponsors"></a>
    I know to use javascript within a php page. The above is just a sample code and what I am trying to achieve is to load about 5-6 images into an array so that it loads quickly when their respective links are clicked. I want to load the images into the array only after the page is completely loaded(as in Done) the way the above example works. Any ideas/suggestions appreciated.

    Cheers, paCkeTroUTer
    visit http://www.techsatcomputers.com
  2. #2
  3. Newbie :P
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Jan 2001
    Location
    In the PHP Engine :-)
    Posts
    2,880
    Rep Power
    21
    PHP = Server Side
    Javascript = Client Side

    PHP cannot tell when a page has finished loading so it would be impossible to use PHP to load images after the page is loaded (Done). PHP parses code and then returns it's result back to the browser after this there can be no interaction unless the page moves, is submitted in someway etc.

    You could delay load the images so that the page loads up and then the images a few seconds later, but this would be very difficult to judge due to the variety of speeds of connection.
    ---------------------
    -- SilkySmooth --
    ---------------------
    Proxy
  4. #3
  5. No Profile Picture
    Gone PHP Crazy
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    393
    Rep Power
    12

    Wink


    Damn !

    I understand the concept of server/client side. I will have to resort to client side scripting then

    Thanks for your input
    visit http://www.techsatcomputers.com
  6. #4
  7. Newbie :P
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Jan 2001
    Location
    In the PHP Engine :-)
    Posts
    2,880
    Rep Power
    21
    I use the following JS code to preload images after the page is loaded, comes from Dreamweaver of Fireworks, can't remember which. Compact and works ok for me and my clients.

    PHP Code:
    function MM_preloadImages() { //v3.0
     
    var d=document; if(d.images){ if(!d.MM_pd.MM_p=new Array();
       var 
    i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0i<a.lengthi++)
       if (
    a[i].indexOf("#")!=0){ d.MM_p[j]=new Imaged.MM_p[j++].src=a[i];}}

    Then in the Body:

    PHP Code:
    ONLOAD="MM_preloadImages('image1.gif','image2.gif');" 
    All you need to do is add the images into the Onload and your away.

    HTH
    ---------------------
    -- SilkySmooth --
    ---------------------
    Proxy
  8. #5
  9. No Profile Picture
    Gone PHP Crazy
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    393
    Rep Power
    12
    That code looks good. But as my image paths are dynamic and reside in variables like
    PHP Code:
    $products['pdt_image_path']
    $products['pdt_ex1_path']
    $products['pdt_ex2_path']
    $products['pdt_ex3_path']
    $products['pdt_ex4_path']
    $products['pdt_ex5_path']
    $products['pdt_ex6_path'
    For each page of the product being viewed, I will have different image paths. You can view an example of what I am talking about over here: http://www.australianlighting.com/no...uct_detail.php The images which are shown on the page are thumbnails and when u click on any of them it loads the actual size image.

    Now my question is if I use the script you proivided, wouldn't it take more time to load the whole page when its first loads ? My intention is to load the page as quickly as possible and then when its "Done" load the actual images "in the background" while the user is taking the time to browse the page. I beleive when the images are loaded in the background(into an array), the actual images load fast as it has already been loaded into the document/page. Am I right in what I am saying ?
    visit http://www.techsatcomputers.com
  10. #6
  11. Newbie :P
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Jan 2001
    Location
    In the PHP Engine :-)
    Posts
    2,880
    Rep Power
    21
    In answer to your question: No

    The OnLoad event handler is exactly what you need, basically as soon as the page has loaded (Done) it then performs the action in the OnLoad event. This is pretty common for most web site and is used heavily in the area of loading mouse over effects which is what I mainly use it for.

    So my page gets rendered with all it's graphics and the user can start reading everything, the OnLoad event is trigered straight away and the mouse over images are loaded up into the browser.

    With regards to this statement:

    I beleive when the images are loaded in the background(into an array), the actual images load fast as it has already been loaded into the document/page. Am I right in what I am saying ?

    I am not to sure on this point, although I would say no. Because it is not actually the image that is loaded into the array but rather the name. As far as I am aware an image is only loaded when you explicitly call it, but as I said I am not sure on this point and could be wrong.
    ---------------------
    -- SilkySmooth --
    ---------------------
    Proxy
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    Oklahoma
    Posts
    14
    Rep Power
    0
    ...if I use the script you proivided, wouldn't it take more time to load the whole page when its first loads ? My intention is to load the page as quickly as possible and then when its "Done" load the actual images "in the background" while the user is taking the time to browse the page.
    That's what happens naturally if you don't preload images.
    The preload functions are mainly used for mouseover effects so that the new image shows instantly when the user mousesover instead of taking time to load at that point.

    As for having PHP tell JavaScript which images to preload - that's no problem even though PHP will execute before the JavaScript. You can have PHP interact with any JavaScript code with the following sort of code:

    image[0] = '<?= $image[0]; ?>';

    or, in PHP:

    <?php
    for ($i=0;$i<$nbr_images;$i++)
    {
    print ("image[$i] = '$image[$i]';\n");
    }
    ?>

    I hope that helps some.

    - Hank / CompuSolver.com
    Last edited by compusolver; May 30th, 2003 at 06:19 PM.
  14. #8
  15. No Profile Picture
    Gone PHP Crazy
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    393
    Rep Power
    12
    Hi, I am using the script provided by SilkySmooth and it works like a charm. Here is what I have done:
    PHP Code:
        <body onload="MM_preloadImages('<?php echo $products['pdt_image_path']; ?>','<?php echo $products['pdt_ex1_path']; ?>','<?php echo $products['pdt_ex2_path']; ?>','<?php echo $products['pdt_ex3_path']; ?>','<?php echo $products['pdt_ex4_path']; ?>')" leftmargin="0"  topmargin="0" bottommargin="0" marginwidth="0">
    Jeffery
  16. #9
  17. Newbie :P
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Jan 2001
    Location
    In the PHP Engine :-)
    Posts
    2,880
    Rep Power
    21
    Hi Jeffery,

    Glad the code helped :-)
    ---------------------
    -- SilkySmooth --
    ---------------------
    Proxy

IMN logo majestic logo threadwatch logo seochat tools logo