Question

我有一个砖石网格，图像是黑白的，当你将鼠标悬停在它们上面时，会出现彩色图像。它们不是合成图像。他们都是分开的。（我只是为其他人编写错误代码）

在新页面加载后的初始悬停时，悬停时会有延迟（和灰色叠加）。在初始之后，当切换到彩色照片时，它当然是瞬间的。

所以我尝试做的是使用一些javascript预加载图片，但我在执行此操作时遇到了麻烦。以下是我的代码。此外，这是在Wordpress中。不确定这是否重要。

所有图像也都是背景图像，不是硬编码到html中。它是所有背景css。谢谢你的帮助！

<script language="JavaScript">

$('document').ready(function preloader() {

     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="images/treatment_locations.jpg"
     images[1]="images/community_news_events.jpg"
     images[2]="images/success_stories.jpg"
     images[3]="images/self_assessment.jpg"
     images[4]="images/our_associates.jpg"
     images[5]="images/treatment_programs.jpg"
     images[6]="images/patient_portal.jpg"
     images[7]="images/FAQ.jpg"
     images[8]="images/what_to_expect.jpg"

     // start preloading
     for(i=0; i<=8; i++) 
     {
          imageObj.src=images[i];
     }
});

</script>

Answer 1

如果在每次迭代中覆盖src，则表示您没有给浏览器提取图像的机会。你可能只预装了最后一张图片。

尝试：

var imageObjs = [];
$('document').ready(function preloader() {

     // counter
     var i = 0;

     // set image list
     images = new Array();
     images[0]="images/treatment_locations.jpg"
     images[1]="images/community_news_events.jpg"
     images[2]="images/success_stories.jpg"
     images[3]="images/self_assessment.jpg"
     images[4]="images/our_associates.jpg"
     images[5]="images/treatment_programs.jpg"
     images[6]="images/patient_portal.jpg"
     images[7]="images/FAQ.jpg"
     images[8]="images/what_to_expect.jpg"

     // start preloading
     for(i=0; i<=8; i++) 
     {
          var imageObj = new Image();
          imageObj.src=images[i];
          imageObjs.push(imageObj);
     }
});

Answer 2

这是另一种方法，它只存储成功加载的图像。

var imgObjs = [];

$(document).ready(function preloader() {

  // images list

  var images = [
    'treatment_locations.jpg',
    'community_news_events.jpg',
    'success_stories.jpg',
    'self_assessment.jpg',
    'our_associates.jpg',
    'treatment_programs.jpg',
    'patient_portal.jpg',
    'FAQ.jpg',
    'what_to_expect.jpg'
  ];

  for (var i in images) {

    var img = new Image();
    img.src = 'images/' + images[i];

    // stores it on array after loading

    img.onload = function() {
      imgObjs.push(this);
    };
  }
});

使用Javascript预加载图像不工作

2 个答案: