Php 想要展示“；装载”；图像下载期间的图像-Javascript_Php_Javascript_Html_Web Applications

Php 想要展示“；装载”；图像下载期间的图像-Javascript

php javascript html web-applications

Php 想要展示“；装载”；图像下载期间的图像-Javascript,php,javascript,html,web-applications,Php,Javascript,Html,Web Applications,我正在使用下面的脚本在小图像上显示大图像（上一页附带的示例照片）。我想在从服务器下载大图像时显示“正在加载”图像（如）。如何做到这一点注意：我问了一个类似的问题，但我没有成功地将append函数应用于以下代码。请帮忙 <script type="text/javascript"> function showIt(imgsrc) { var holder = document.getElementById('imageshow'); v

我正在使用下面的脚本在小图像上显示大图像（上一页附带的示例照片）。我想在从服务器下载大图像时显示“正在加载”图像（如）。如何做到这一点

注意：我问了一个类似的问题，但我没有成功地将

append

函数应用于以下代码。请帮忙

<script type="text/javascript">
    function showIt(imgsrc)
    {
        var holder = document.getElementById('imageshow');
        var newpic= new Image(); 
        newpic.src=imgsrc;
        holder.src=imgsrc;
        holder.width = newpic.width;
        holder.height=newpic.height;
    }
</script>

<body>
     /***on hover, xyz.jpg will be replaced by bigA.jpg and so on***/
     <img src="smallA.jpg" onMouseOver="showIt('bigA.jpg')"/> 
     <img src="smallB.jpg" onMouseOver="showIt('bigB.jpg')"/>

     <img src="xyz.jpg" id="imageshow" />         
</body>


功能显示（imgsrc）
{
var holder=document.getElementById（'imageshow'）；
var newpic=新图像（）；
newpic.src=imgsrc；
holder.src=imgsrc；
holder.width=新图片宽度；
支架高度=新图片高度；
}
/***悬停时，xyz.jpg将被bigA.jpg替换，以此类推***/

图像有一个加载事件。只要您在设置image.src之前设置了加载处理程序，您就会在成功加载映像或加载过程中遇到某种错误时收到通知。我在我写的幻灯片中就是这么做的，这样我就知道下一幅图像何时准备好显示，如果图像延迟超过指定的显示时间一秒以上，我就会显示一个等待光标（动画gif，就像你想要的那样），这样用户就知道发生了什么

通常，您可以执行以下操作：

function loadImage(url, successHandler, errorHandler) {
    var myImg = new Image();
    myImg.onload = myLoadHandler;      // universally supported
    myImg.onabort = myErrorHandler;    // only supported in some browsers, but no harm in listening for it
    myImg.onerror = myErrorHandler;
    myImg.src = url;

    function myLoadHandler() {
        successHandler(myImg, url);
    }

    function myErrorHandler() {
        if (errorHandler) {
            errorHandler(url);
        }
    }

}

使用这样的代码，您可以在启动映像加载时显示等待光标，并在调用successHandler时隐藏它

如果这些事件还有任何其他侦听器，那么您应该使用addEventListener或attachEvent，而不是onload、OnBort、onerror，但是如果只有一个侦听器，您可以选择任何一种方式

如果预先知道所需的图像，那么有时预加载可能稍后使用的图像是更好的用户体验（更少的等待）。这将使它们进入浏览器的内存缓存，以便在需要时立即显示。可以在HTML或JS中预加载图像。在HTML中，只需在网页中插入所有所需图像的标记（但用CSS隐藏它们）。在JS中，只需创建一个图像数组并创建图像对象：

// image URLs to preload
var preloadImageURLs = [
    "http://photos.smugmug.com/935492456_5tur7-M.jpg",
    "http://photos.smugmug.com/835492456_968nf-M.jpg",
    "http://photos.smugmug.com/735492456_3kg86-M.jpg",
];

var preloads = [];   // storage for preloaded images

function preloadImages() {
    var img, i;
    for (i = 0; i < preloadImageURLs.length; i++) {
        img = new Image();
        img.src = preloadImageURLs[i];
        preloads.push(img);
    }
}

//要预加载的图像URL
变量preload-ImageURL=[
"http://photos.smugmug.com/935492456_5tur7-M.jpg",
"http://photos.smugmug.com/835492456_968nf-M.jpg",
"http://photos.smugmug.com/735492456_3kg86-M.jpg",
];
变量预加载=[]；//预加载图像的存储
函数preload images（）{
var-img，i；
对于（i=0；i


这将导致preload ImageUrls
数组中的所有图像被预加载，并在网页生命周期的后期立即可用，从而防止用户在等待加载图像时出现任何延迟。显然，预加载的图像实际加载的时间很短，但是对于小图像，通常在用户与网页交互之前发生，因此它可以让用户更快地感受到使用图像的网页动态部分。

<img id=access src=loading.gif>

<script>
window.onload=function(){

document.getElementById('access').src='access.jpg';

}
</script>

window.onload=function（）{
document.getElementById（'access'）.src='access.jpg'；
}

希望这有帮助