• How To Preload all images from folder using JavaScript + PHP

    For preload all images from folder using JavaScript+ PHP requires following 2 steps.

    1.First create Preload function in JavaScript file as follows.
    This function will cache all images of supplied list in JavaScript.

    function preloadImages(list) {
    var img;
    if (!preloadImages.cache) {
    preloadImages.cache = [];
    }
    for (var i = 0; i < list.length; i++) {
    img = new Image();
    img.src = list[i];
    preloadImages.cache.push(img);
    }
    }
    									

    2.For preloading images into JavaScript, we need to have all images of a folder in one list.
    For example, we have folder with below structure.

    FolderName
    
    ->Folder1
                      ->Folder11
                                          ->Folder111
    ->Img1111.png
    ->Img1112.png
    ->Img111.png
    ->Img112.png
    ->Img11.png
    ->Img12.png
    ->Folder2
    ->Img1.png
    ->Img2.png
    									

    For this folder, we need to create following list of images.

    ImgArray = [
    ‘FolderName/Img1.png’,
    ‘FolderName/Img2.png’,
    ‘FolderName/Folder1/Img11.png’,
    ‘FolderName/Folder1/Img12.png’,
    ‘FolderName/Folder1/Folder11/Img111.png’,
    ‘FolderName/Folder1/Folder11/Img112.png’,
    ‘FolderName/Folder1/Folder11/Folder111/Img1111.png’,
    ‘FolderName/Folder1/Folder11/Folder111/Img1112.png’
    ]
    									

    To create this list, we need to make simple ajax call as below.loadimages.php

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    var ImgArray = Array();
    var restext = xmlhttp.responseText;
    var ImgArray = restext.split('+++');
    preloadImages(ImgArray); // call preload image function
    }
    }
    xmlhttp.open("GET", "loadimages.php?folder=FolderName", true);
    xmlhttp.send();
    									

    <?php
    $folder = $_REQUEST['folder'];
    
    $directory1 = 'media/'.$folder.'/*.png';
    $images = glob($directory1);
    $folder1img = '';
    // create array
    foreach($images as $image){
    $folder1img[] = "$image";
    }
    
    $directory2 = 'media/'.$folder.'/*/';
    $images = glob($directory2."*.png");
    $folder2img = '';
    // create array
    foreach($images as $image){
    $folder2img[] = "$image";
    }
    
    $directory3 = 'media/'.$folder.'/*/*/';
    $images = glob($directory3."*.png");
    $folder3img = '';
    // create array
    foreach($images as $image){
    $folder3img[] = "$image";
    }
    
    $folderimgs = array_merge($folder1img, $folder2img, $folder3img);
    
    foreach($folderimgs as $folderimgs){
    echo $folderimgs.'+++' ;
    }
    ?>
    									

Comments on this post

Leave a Reply

  • Security Code :


    nine − 3 =