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

前端之家收集整理的这篇文章主要介绍了jquery – ajax – 在写入页面之前检查图像是否已加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

alt text http://img815.imageshack.us/img815/985/loading.jpg

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

然后这个函数弹出一个< img>标记到第一个列表项,使用onload调用第二个函数

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

我的代码

$(window).load(function() {
            txt="";
            for(d=0;d<100;d++)
            {
                txt=txt + "
  • 我有一种感觉,这可能是非常棘手的实现我如何设置它,我有一种感觉,我可能需要创建一个img对象,并等待加载???

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

    最佳答案
    在我看来,你正在艰难地思考.有时解决方案是改变思维方式.这完全取决于你. One of my favorite related books.

    我的建议有类似下面的代码.这不完全是你需要的……但……

    Demo on Fiddle

    HTML:

    tochal Hotel">

    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;
    }
    ​
    

    猜你在找的jQuery相关文章