Question

我已尝试使用JavaScript以下列方式进行图像预加载

<script type="text/javascript">            
    function preloader() {

    heavyImage = new Image();

        heavyImage.src = "../../Images/WFS_Homepage_GlobalServerNetwork_Transparent.jpg";

    }            
</script>

<body  onload="javascript:preloader()" >

<a href="#" onmouseover="javascript:document.img01.src='../../Images/WFS_Homepage_GlobalServerNetwork_Transparent.jpg">
<img src="../../Images/index.jpg" name="img01" />
</a>

但是没有任何想法。如何在HTML中调用JavaScript函数。我如何使用预加载的图像进行进一步处理。我在asp.net mvc 3 Razor中尝试它

Answer 1

<script>
  var preloadImages = [
        '@Url.Content("~/Content/img/firstImage.jpg")',
        '@Url.Content("~/Content/img/secondImage.jpg")',
        '@Url.Content("~/Content/img/thirdImage.jpg")',
      ],
      images = [];
  for (var i = 0; i < preloadImages.length; i++){
    var img = new Image();
    img.src = preloadImages[i];
    images.push(img);
  }
</script>

您可以将其放在文档的<body>（任何地方）。

如何使用razor语法中的javascript预加载图像？

1 个答案: