ajax - 在写入页面之前检查图像是否已加载

Question

在我认为这个项目结束之后,我遇到了一些我刚刚发现的问题.它在我的本地服务器上工作得很好但是当我实时推送代码时,图像可能需要半秒才能正确加载,导致在加载图像上弹出一个小页面缩略图.哎呀

替代文字http://img815.imageshack.us/img815/985/loading.jpg

那么最近发生了什么？首先,运行一个函数,在window.load该函数上创建了大量列表项,其中加载gif作为bg图像.

然后,此函数将<img>标记弹出到第一个列表项中,并onload调用第二个函数

第二个函数循环遍历XML文件,并将xml中的URL包装在<img>标记中,并将其放在下一个空格中LI.这就是问题所在.目前<img src=$variable onload=loadnextimage() />它在实际加载之前将它放入List项.

我的代码:

$(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对象,并等待加载???

一旦页面被缓存,加载显然工作正常,但它首先加载时有点痛苦,所以我需要解决这个问题.任何建议欢迎:)谢谢

Answer 1

在我看来，你的想法很艰难。有时解决办法就是改变思维方式。这完全取决于你。我最喜欢的相关书籍之一。

\n\n

我的建议是使用类似下面的代码。这并不完全是您所需要的，但是......

\n\n

Fiddle 演示

\n\n

HTML：

\n\n

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

\n\n

CSS：

\n\n

html, body {\n    padding: 10px;\n}\n\n.frame {\n    z-index: 15;\n    box-shadow: 0 0 10px gray;\n    width: 350px;\n    height: 350px;\n    border: gray solid 1px;\n    padding: 5px;\n    background: #F0F9FF;\n}\n\n.loadingVitrin {\n    z-index: 15;\n    width: 350px;\n    height: 350px;\n    overflow: hidden;\n    background: url("http://photoblog.toorajam.com/images/main/ajax-loader.gif") no-repeat center;\n}\n\n.loadingVitrin img {\n    display: none;\n    height: 350px;\n}\n\xe2\x80\x8b\n

\n