首頁>Program>source

I have a hard time getting my head around how image preloaders work 在Java指令碼中.因此,如果有人可以用一个很有帮助的例子来說明他们的工作方式。 没有jquery

最新回復
  • 5月前
    1 #

    Loading a single image

    瀏覽器將異步載入圖像...意味着向瀏覽器提供 .src 圖片,它將開始在後台載入该圖片,但是在 .src之後也会直接繼續處理javascript代碼

    // create a new image object
    var img=new Image();
    // set the image object's image source
    img.src='myImage.png';
    // do some stuff while the image is loading in the background
    alert('Your image has started loading, but is not yet complete');
    

    警報將在圖像完全載入並可以使用之前顯示。

    那麼您如何知道圖像何時完全載入並可以使用?

    答案:您可以告诉瀏覽器在完成圖像載入後對其进行"回撥".通過在圖像物件上添加" img.onload"函式,您会得到"回撥".每当瀏覽器完成圖像載入時,瀏覽器都会觸發" img.onload"功能中的代碼。

    img.onload = theImageHasFinishedLoading;
    function theImageHasFinishedLoad(){
        alert('Your image has finished loading...you can use it now');
    }
    

    完整的圖像載入過程將按以下順序进行:

    // happens 1st
    var img=new Image();
    // happens 2nd: this callback is ASSIGNED, but NOT TRIGGERED yet
    //     until the image has fully loaded
    img.onload = theImageHasFinishedLoading;
    // happens 3rd
    img.src='myImage.png';
    // happens 4th
    alert('Your image has started loading, but is not yet complete');
    // happens 5th after the browser has fully loaded the image
    //     (The browser will call this function automatically because .onload was set)
    function theImageHasFinishedLoad(){
        alert('Your image has finished loading...you can use it now');
    }
    

    Pre-loading multiple images

    要預載入多张圖片:

      Create an array to hold all your image URLs and add your image URLs to this array.

       
      // For example
      var imageURLs=[];
      imageURLs[0]='myImage.png';
      

      建立一个陣列来儲存所有圖像物件(==您的實際圖像).

      // For example
      var imgs=[];
      

      添加 new Image 元素添加到圖像物件陣列(添加一个 new Image 對於網址陣列中的每个網址).

      //For example
      imgs[0] = new Image();
      

      設置每个圖像物件的 .onload 回撥到同一函式。

      // For example
      imgs[0].onload = theImageHasFinishedLoading;
      

      使用圖像URL陣列設置 .src 每张圖片的網址。

      // For example
      imgs[0].src = imageURLs[0];
      

      theImageHasFinishedLoading 回撥,每次成功載入新圖像時都增加一个計數器。

      // For example
      var counter=0;
      function theImageHasFinishedLoading(){
          counter++;
      }
      

      当計數器達到与圖像URL陣列相同的长度時,您將知道所有圖像都已完全載入。

         function theImageHasFinishedLoading(){
              counter++;
              if(counter>=imageURLs.length){
                  alert('All the images have successfully preloaded. Go use them now!');
              }
          }
      

      Here's a full example code and a Demo:

      window.onload=(function(){
      
        // canvas related variables
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var cw=canvas.width;
        var ch=canvas.height;
        // put the paths to your images in imageURLs[]
        var imageURLs=[];  
        imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");
        imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");
        // the loaded images will be placed in imgs[]
        var imgs=[];
        var imagesOK=0;
        startLoadingAllImages(imagesAreNowLoaded);
        // Create a new Image() for each item in imageURLs[]
        // When all images are loaded, run the callback (==imagesAreNowLoaded)
        function startLoadingAllImages(callback){
          // iterate through the imageURLs array and create new images for each
          for (var i=0; i<imageURLs.length; i++) {
            // create a new image an push it into the imgs[] array
            var img = new Image();
            // Important! By pushing (saving) this img into imgs[],
            //     we make sure the img variable is free to
            //     take on the next value in the loop.
            imgs.push(img);
            // when this image loads, call this img.onload
            img.onload = function(){ 
              // this img loaded, increment the image counter
              imagesOK++; 
              // if we've loaded all images, call the callback
              if (imagesOK>=imageURLs.length ) {
                callback();
              }
            };
            // notify if there's an error
            img.onerror=function(){alert("image load failed");} 
            // set img properties
            img.src = imageURLs[i];
          }      
        }
        // All the images are now loaded
        // Do drawImage & fillText
        function imagesAreNowLoaded(){
          // the imgs[] array now holds fully loaded images
          // the imgs[] are in the same order as imageURLs[]
          ctx.font="30px sans-serif";
          ctx.fillStyle="#333333";
          // drawImage the first image (face1.png) from imgs[0]
          // and fillText its label below the image
          ctx.drawImage(imgs[0],0,10);
          ctx.fillText("face1.png", 0, 135);
          // drawImage the first image (face2.png) from imgs[1]
          // and fillText its label below the image
          ctx.drawImage(imgs[1],200,10);
          ctx.fillText("face2.png", 210, 135);
        }
      
      }); // end window.onload
      
      body{ background-color: ivory; }
      #canvas{border:1px solid red;}
      
      <canvas id="canvas" width=400 height=200></canvas>
      

  • CUDA原子改變標志
  • python:获取Tkinter Entry小部件的內容