阿贾克斯 - 检查图像写入页之前已经加载 [英] ajax - check images have loaded before writing to the page

问题描述

我有一点，我刚刚发现后，我以为这个项目已完成的问题。它的工作完美我的本地服务器上，但是当我推开code生活的图片可以采取半秒钟正确加载导致小页面缩略图，弹出了一​​个加载图像。哎呀

I have a bit of a problem that I have just found, after I thought this project had finished. It worked perfectly on my local server but when I pushed the code live the images can take half a second to load properly causing a little page thumbnail to pop up over a loading image. grrr

于是发生了什么？那么首先关闭功能运行在 window.load 这创造了大量的列表项的加载GIF作为背景图片。

So whats happening? Well first off a function runs on window.load which created a large number of list items with a loading gif as the bg image.

那么这个函数会弹出一个＆LT; IMG＆GT; 标签到第一个列表项，与的onload 这就要求第二功能

Then this function pops an <img> tag into the first list item, with an onload which calls a second function

通过一个XML文件，第二个函数的周期和包装的URL在XML中的＆LT; IMG＆GT; 标签，并把它的下一个空 LI 。这就是问题所在。目前，它把＆LT; IMG SRC = $变量的onload = loadnextimage（）/＆GT; 为它实际加载前的项目

This second function cycles through an XML file and wraps the URL in the xml in an <img> tag and puts it in the next empty LI. this is where the problem lies. At the moment it puts the <img src=$variable onload=loadnextimage() /> into the List item before it has actually loaded.

我的code：

$(window).load(function() {
            txt="";
            for(d=0;d<100;d++)
            {
                txt=txt + "<li class='gif' id='loading"+d+"'></li>"; 

            }
            document.getElementById('page-wrap').innerHTML=txt;
            document.getElementById('loading0').innerHTML="<img src='images/0.jpg' onLoad='loadImages(0)' />";
        });
        function loadImages(i){ 
            i++
            $.ajax
            ({
                type: "GET",
                url: "sites.xml",
                dataType: "xml",
                async: "true",
                success: function(xml) 
                {
                    var img = $(xml).find('image[id=' + i + ']'),
                    id = img.attr('id'),
                    url = img.find('url').text();
                    $('#loading'+i).html('<img src="'+url+'" onLoad="loadImages('+i+')" />').hide();
                    $('#loading'+i).fadeIn();
                }
            });
        }

我有一种感觉，这可能是相当棘手实现这一点，我怎么把它设置，我有一种感觉，我可能需要创建一个img对象，并等待该加载???

I have a feeling it may be quite tricky achieving this how I have it set up, and I have a feeling i may need to create an img object and wait for that to load???

在页面缓存在装载显然工作正常，但它是一个有点痛ONT他第一次加载，所以我需要解决这个问题。 任何意见欢迎:)谢谢

Once the page is cached the loading obviously works fine but its a bit of a pain ont he first load so i need to fix this. any advise welcome :) thanks

推荐答案

在我看来，你是想在一个艰辛的道路。有时，解决办法是改变思维方式。它是完全取决于你。 <一href="http://books.google.co.uk/books/about/Who_Moved_My_Cheese.html?id=HXQDqU1zfe0C&redir_esc=y"相对=nofollow>我最喜爱的相关书籍。

In my opinion, you are thinking in a hard way. Sometimes solution is in changing the way of thinking. It is completely depends on you. One of my favorite related books.

我的建议是有类似下面的code。这不正是你需要的，但......

My suggestion is have something like the code below. It's not exactly what you need but...

演示的小提琴

HTML：

<div class="frame" title="Tochal Hotel">
    <div class="loadingVitrin">
        <img src="http://photoblog.toorajam.com/photos/4cf85d53afc37de7e0cc9fa207c7b977.jpg" onload="$(this).fadeTo(500, 1);">
    </div>
</div>​

CSS：

html, body {
    padding: 10px;
}

.frame {
    z-index: 15;
    box-shadow: 0 0 10px gray;
    width: 350px;
    height: 350px;
    border: gray solid 1px;
    padding: 5px;
    background: #F0F9FF;
}

.loadingVitrin {
    z-index: 15;
    width: 350px;
    height: 350px;
    overflow: hidden;
    background: url("http://photoblog.toorajam.com/images/main/ajax-loader.gif") no-repeat center;
}

.loadingVitrin img {
    display: none;
    height: 350px;
}
​

这篇关于阿贾克斯 - 检查图像写入页之前已经加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！