预加载图像并在加载时显示微调器

本文介绍了预加载图像并在加载时显示微调器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

Hy，

我使用uploadify上传一些图片，在我显示列表中的所有图像后，当我点击图像拇指时，它是一个更大的图像使用此功能在div中打开

i use uploadify to upload some images, after i display all the images thumbs in a list, when i click on a image thumb a bigger image it's open in a div with this function

$(".thumbs li a").click(function(){ var largePath = $(this).attr("href"); $('.thumbs li').removeClass('thumbac'); $(this).parent().addClass('thumbac'); $("#largeImg").attr({ src: largePath }); return false; });

这是我的照片列表：

<div class="upimage"> <ul id="upimagesQueue" class="thumbs"> <li id="liupimages"> <a href="uploads/0001.jpg"><img src="uploads/0001.jpg" alt="0001.jpg" id=""></a> </li> <li id="liupimages"> <a href="uploads/0002.jpg"><img src="uploads/0002.jpg" alt="0002.jpg" id=""></a> </li> <li id="liupimages"> <a href="uploads/0003.jpg"><img src="uploads/0003.jpg" alt="0003.jpg" id=""></a> </li> <script> $(".thumbs li a").click(function(){ var largePath = $(this).attr("href"); $('.thumbs li').removeClass('thumbac'); $(this).parent().addClass('thumbac'); $("#largeImg").attr({ src: largePath }); return false; }); </script> </ul> </div>

这是图像出现的div

this is the div where the images appear

<div class="largeImg" > <img id="largeImg" src="" /> </div>

如何在显示之前预先加载图像？

how i can preload the image before it display?

推荐答案

您可以通过某种方式利用 加载 事件，例如：

You can somehow harness the load event, e.g.:

$(".thumbs li a").click(function(){ var largePath = $(this).attr("href"); $('.thumbs li').removeClass('thumbac'); $(this).parent().addClass('thumbac'); $("#largeImg").hide() .attr({ src: largePath }) .load(function() { $(this).show(); }); return false; });