JavaScript：从JavaScript加载图片，然后等待“加载”该图像的事件 [英] JavaScript: Load an image from javascript then wait for the "load" event of that image

问题描述

我有一个显示高质量图片的页面。照片通常需要一段时间才能加载。我有一个运行在图片加载的jQuery函数 #image 我希望这个函数按照它们出现的顺序每次预先加载其他图片1。因此：如果我在第一张图片上，它应该加载图片1并显示它，然后在pic1完成时预加载/缓存第二张图片。正在加载的图片都已经附加了一个缓存头。当pic2完成加载时，pic3应该开始加载。如果你想知道，我有一个cgi后端能够打印循环等内容。

到目前为止，我有以下工作：

  $（'＃image'）。load（function（）{
 preLoad2 = new Image（）
 preLoad2.src =pic2
}）
  

然后我可以继续使用另一个函数 $（'＃image'）。load（function（）{} line，但是我怎样才能让下一张图片不会开始加载，直到这个图片完全我不希望使用定时延迟，因为这不是很准确。

这是我目前使用的。我在这个例子中使用了一个bash cgi脚本。

 ＃设置循环计数器
＃变量将被称为$ [var-name] 
 count = 1 
 first = true 
＃通过所有需要预加载的图像循环
用于* 
中的文件
 #check如果图片与搜索匹配条件
 if [[$ file= * $ lowerSear ch *]] 
然后
＃创建一个js脚本
 echo< script language = \javascript\type = \text / javascript\> 
 echofunction load $ count（）{
 echopreLoad $ count = new Image（）
 echopreLoad $ count.src = \？loadFile = $ file \\ \\
 echo}
＃如果[$ first='true'] 
，这些函数中的第一个应该绑定到主图像加载事件
然后
 echodocument.getElementById（'image'）。onload = load $ count（）
 #the 2nd and on should be bound to pre-load of the previous picture 
 else 
 echopreLoad $ last.onload = load $ count（）
 #end if 
 fi 
 echo< / script>
 #store current计数，以便下一次通过它可以用来调用最后加载的图片
 last = $ count 
 first = false 
 #add 1来计数
 count = $（（count + 1））
 #end if 
 fi 
 #end loop 
 done 
  

这是如何工作的：循环显示图片。如果图片符合搜索条件，则运行主代码...否则跳过循环。在搜索条件中，它会创建一个包含函数的js脚本。该函数加载循环当前所引用的图片。然后它创建一个onLoad函数，该函数引用最后一张预加载的图片，并为其运行刚刚创建的函数设置一个onLoad事件。

我相信这个问题的答案是与相关问题

解决方案

首先创建像这样的图像的JSON记录

  var imageRecord = ['image1.jpg'，
'image2.jpg'，
'image3.jpg'，
'image4.jpg '，
'image5.jpg']; 
  

然后创建一个接一个加载图片的函数

 函数loadAllImages（index）{
 if（index> = imageRecord.length）{
 return; 
} 
 //创建图像对象
 var image = new Image（）; 
 
 //添加图片路径
 image.src = imageRecord [index]; 
 
 //绑定加载事件
 image.onload = function（）{
 //现在加载下一张图片
 loadAllImages（index + 1）; 
} 
 
} 
  

希望这小段代码能帮助您。

使用javascript了解预加载图像的整体概念，请访问 http://zainultutorials.blogspot.in/2013/11/preload-images-using-javascript.html

I have a page that displays a picture in high quality. The pictures typically take a while to load. I have a jQuery function that runs on load of the picture #image I want this function to pre-load other images 1 at a time in the order they will appear.

So: on if I am on the 1st picture, it should load picture 1 and display it, then pre-load/cache the second picture when pic1 is done. The pictures being loaded all have a caching header attached already. When pic2 is done loading, pic3 should begin loading. In case you are wondering, I have a cgi backend that is able to print things in loops and such.

So far I have the following working:

$('#image').load(function() {
 preLoad2 = new Image()
 preLoad2.src = "pic2"
})

I can then continue this with another function with the same $('#image').load(function() { } line, but how do I make it so the next picture doesn't begin loading until this one is completely loaded. I would prefer not to use a timed delay as that is not very accurate.

Here is what I have currently. I am using a bash cgi script in this example.

#set a loop counter
# variables will be refered to as $[var-name]
count=1
first=true
#loop through all images that need pre-loading
for file in *
  do
    #check if the picture matches the search criteria
    if [[ "$file" = *$lowerSearch* ]]
      then
        #create a js script
        echo "<script language=\"javascript\" type=\"text/javascript\">"
        echo "function load$count() {"
        echo " preLoad$count = new Image()"
        echo " preLoad$count.src = \"?loadFile=$file\""
        echo "}"
        #the first one of these functions should be bound to the main image load event
        if [ "$first" = 'true' ]
          then
            echo "document.getElementById('image').onload = load$count()"
        #the 2nd and on should be bound to the pre-load of the previous picture
        else
          echo " preLoad$last.onload = load$count()"
        #end if
        fi
        echo "</script>"
        #store the current count so that the next time through it can be used to call the last loaded picture
        last=$count
        first=false
        #add 1 to count
        count=$((count+1))
    #end if
    fi
#end loop
done

How this works: Loops through pictures. If the picture matches the search criteria then run the main code...otherwise skip loop. In the search criteria, it creates a js script that includes a function. the function loads the picture that the loop is currently referring to. It then creates an onLoad function that refers to the last picture pre-loaded and sets an onLoad event to it that runs the function just created.

I believe this question's answer is somewhat related to this question

解决方案

First create JSON record of images like this

var imageRecord = ['image1.jpg',
                'image2.jpg',
                'image3.jpg',
                'image4.jpg',
                'image5.jpg'];

then create function to load image one after another

function loadAllImages(index){
  if( index >= imageRecord.length ){
    return;
  }
  //create image object
  var image = new Image();

  //add image path
  image.src = imageRecord[index];

  //bind load event
  image.onload = function(){
    //now load next image
    loadAllImages(index + 1);
  }

}

hope this small snippet will help you.

to understand whole concept of preload images using javascript, please visit http://zainultutorials.blogspot.in/2013/11/preload-images-using-javascript.html

这篇关于JavaScript：从JavaScript加载图片，然后等待“加载”该图像的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！