Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Junsee
    Guest

    Jquery Preloader

    I can't seem to get this one going...?

    PHP Code:
    <script type="text/javascript">
        $(window).load(function(){

            function preload(arrayOfImages) {
                $(arrayOfImages).each(function () {
                    $('<img />').attr('src',this).appendTo('body').css('display','none');
                });
            }    
            <?php
                $FolderContents 
    'portfolioimages/';
                
    $files scandir($FolderContents);
                
    $Countpictures count($files);
                
                
    $preloadstring "\t$.preload([";
                for (
    $i=2$i $Countpictures$i++) {
                    
    $image $FolderContents $files[$i];
                    
    $lemmings explode(".",$files[$i]);
                    
    $extention strtolower($lemmings[count($lemmings)-1]);
                    
                    if ( (
    $extention == "jpg") or ($extention == "jpeg") or ($extention == "png") or ($extention == "gif") ){
                        
    $preloadstring .= "'$image',";
                    }
                }
                
    $preloadstring rtrim($preloadstring",");
                
    $preloadstring .= "]); \r\n";
                
                echo 
    $preloadstring;
            
    ?>
        }); 
    </script>
    I am not doubting it's a good language, but why does it have to beat me up all the time?

    What I am trying to do is a simple preloader, taken from code all over the web. Basically on window load it pulls in the array of images on a webfolder (this part coded in php) put them in the DOM and then hides them.

    I have included a php part, because thats the language I am strongest in. and I don't know how to do it in JQuery, "One problem at a time". But basically it just checks a folder and reads all the image files in that folder.

    the out put looks like this:
    Code:
    <script type="text/javascript"> 
    	$(window).load(function(){
     
    		function preload(arrayOfImages) {
    			$(arrayOfImages).each(function () {
    				$('<img />').attr('src',this).appendTo('body').css('display','none');
    			});
    			document.getElementById("LoadingButton").style.display="none";
    			document.getElementById("LandingButton").style.display="block";
    		}	
    			$.preload(['portfolioimages/img01.jpg','portfolioimages/img2.jpg','portfolioimages/img3.jpg']); 
    	}); 
    </script>
    Thank you in Advance

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    normally, preloading is done before the page is shown, otherwise there's really no point...

    Code:
     $(window).load(function(){
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Junsee
    Guest
    its a landing page with some intro text.
    The landing page loads and as the person is reading, I am furiously trying to download as many images before the user clicks onwards.

    making the experince as fast as possible when they goto the main site

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    Quote Originally Posted by Junsee View Post
    its a landing page with some intro text.
    The landing page loads and as the person is reading, I am furiously trying to download as many images before the user clicks onwards.

    making the experince as fast as possible when they goto the main site
    then just add plain old image tags to the HTML document, no JS fanciness required.

    if you insist on using js, fix the php to not use a string literal (in-between apos) to echo the file names, or better yet, use json_endode:


    Code:
    <script>
    <?php 
                $FolderContents = 'portfolioimages/'; 
                echo json_encode( scandir($FolderContents) ); 
     ?> 
      .map(function(img){new Image().src=img; });
    </script>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:


  • #5
    Junsee
    Guest
    Quote Originally Posted by rnd me View Post
    then just add plain old image tags to the HTML document, no JS fanciness required.

    if you insist on using js, fix the php to not use a string literal (in-between apos) to echo the file names, or better yet, use json_endode:


    Code:
    <script>
    <?php 
                $FolderContents = 'portfolioimages/'; 
                echo json_encode( scandir($FolderContents) ); 
     ?> 
      .map(function(img){new Image().src=img; });
    </script>
    Thanks will try that out.
    I need to load some pictures first, for the landing page, the background and so on.
    I had tried a CSS solution, but so many images where loading that it was disrupting the landing page.
    What I need from the solution is to start after the page has loaded, and then just load the images from the folder. JS is the best way, i don't know of , to do this!

  • #6
    Junsee
    Guest
    Thank you
    I just wanted to finish the thread for future people looking for answers. (I hate that when it goes cold)

    I used the solution above, here is the code, works really well
    PHP Code:
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                <?php 
                    $FolderContents 
    'portfolioimages/';
                    
    $filespics scandir($FolderContents);
                    unset(
    $filespics[0]); 
                    unset(
    $filespics[1]); 
                    foreach (
    $filespics as &$value){
                        
    $value 'portfolioimages/'.$value;
                    }
                    echo 
    json_encode$filespics ); 
                
    ?> 
                .map(function(img){new Image().src=img; });
            }); 
        </script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •