How to preload image using javascript in razor syntax?

Question

I have tried in the following way for image preloading using 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>

But not getting any idea.How can i call JavaScript function in HTML .And how can i use preloaded images for further processing.I am trying it in 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>

Which you could place in the <body> of your document (anywhere).

How to preload image using javascript in razor syntax?

Question

1 answers

solution1
0 2013-10-04 12:38:19

How to preload image using javascript in razor syntax?

Question

1 answers

solution1 0 2013-10-04 12:38:19

solution1
0 2013-10-04 12:38:19