Question

我是javascript的初学者，但希望能够动态创建带有onload函数的图像元素（使用纯javascript，而不是jquery）。

我需要这个来预加载。我知道有很多方法可以预加载图像。但是，我特别想通过逐个动态创建图像来预加载图像。

我尝试实现的是，一旦加载了第一个img元素，就会创建另一个元素。我希望任何人都可以解释我的代码有什么问题。我知道预加载有很多替代方案，如果不可能以这种方式预加载，请大家提一下。

另外，对我而言似乎逻辑上应该在src之后放置onload，但是我已经在其他帖子上读到这不应该被完成。这里的货物是否在正确的位置？

这是我的javscript：http://jsfiddle.net/GB4Hs/1/

img_path = 'http://www.google.com/intl/en_com/images/srpr/logo3w.png';

goThrough = 1;
preload();

function preload(){
 if(goThrough == 1){
  goThrough = 0;
  img1 = document.createElement('img');
  img1.onload = function(){goThrough=2;};
  img1.src = img_path;
  img1.style.width = '480px;';
  img1.style.height = '270px;';
  document.body.appendChild(img1);
 };
 if(goThrough == 2){
  goThrough = 0;
  img2 = document.createElement('img');
  img2.onload = function(){goThrough=3;};
  img2.src = img_path;
  img2.style.width = '480px;';
  img2.style.height = '270px;';
  document.body.appendChild(img2);
 }; 
 if(goThrough < 3){
  preload();
 };
};

感谢您抽出宝贵时间阅读我的问题。

Answer 1

问题是您没有在preload回调中再次调用onload功能。

function preload(){
 if(goThrough == 1){
  img1.onload = function(){goThrough=2; preload();};
  // ...
 };
 if(goThrough == 2){
  img2.onload = function(){goThrough=3; preload();};
  // ...
 }; 
 if(goThrough < 3){
  preload();
 };
};

工作演示：http://jsfiddle.net/GB4Hs/2/

使用onload函数创建img元素 - 纯javascript

1 个答案: