Question

我有一个像我这样使用的PHP图像：

<img src="image.php">

有时渲染需要10秒钟（有一些重型数据邮件来自API）。它工作得很好，但无法确定是否有任何事情发生，我想知道是否有一种方法可以在Javascript或PHP中开展业务时显示Loading信息。

谢谢！

Answer 1

<img src="image.php" style="background: url(loading.gif) no-repeat center center;" />

其中loading.gif可能类似于ajax spinner animation。我一直都在使用这种技术。

Answer 2

为什么不尝试缓存图像对象？会减少负荷吗？或者这是一直在更新的东西？您的JavaScript方法只是一个图像预加载器或处理函数，它将用加载指示符替换'img'。看看@ jQuery这是一个简单的方法。

Answer 3

Check out the DEMO

守则：

/*
overlay function:
-------------------------
Shows fancy ajax loading message. To remove this message box,
simply call this from your code:

$('#overlay').remove();

*/

function overlay()
{
    if (!$('#overlay').is(':visible'))
    {
        $('<div id="overlay">Working, please wait...</div>').css({
            width:'300px',
            height: '80px',
            //position: 'fixed', /* this is not suppported in IE6 :( */
            position: 'absolute',
            top: '50%',
            left: '50%',
            background:'url(images/spinner.gif) no-repeat 50% 50px #999999',
            textAlign:'center',
            padding:'10px',
            border:'12px solid #cccccc',
            marginLeft: '-150px',
            //marginTop: '-40px',
            marginTop: -40 + $(window).scrollTop() + "px",
            zIndex:'99',
            overflow: 'auto',
            color:'#ffffff',
            fontWeight:'bold',
            fontSize:'17px',
            opacity:0.8,
            MozBorderRadius:'10px',
            WebkitBorderRadius:'10px',
            borderRadius:'10px'
        }).appendTo($('body'));
    }
}

您可以修改上面的background:属性以指定加载图片。当您想要显示加载消息时，需要调用overlay()函数。稍后，您可以随时使用$('#overlay').remove();删除加载邮件。

Answer 4

查看此示例

<强> HTML

<ul id="portfolio">
<li class="loading"></li>
<li class="loading"></li>
<li class="loading"></li>
</ul>

<强>的Javascript

// DOM ready
$(function () {

            // image source
            var images = new Array();
                images[0] = 'http://farm4.static.flickr.com/3293/2805001285_4164179461_m.jpg';
                images[1] = 'http://farm4.static.flickr.com/3103/2801920553_656406f2dd_m.jpg';
                images[2] = 'http://farm41.static.flickr.com/3248/2802705514_b7a0ba55c9_m.jpg';

            // loop through matching element
            $("ul#portfolio li").each(function(index,el){
                    // new image object
                    var img = new Image();
                    // image onload
                    $(img).load(function () {
                        // hide first
                        $(this).css('display','none'); // since .hide() failed in safari
                        //
                        $(el).removeClass('loading').append(this);
                        $(this).fadeIn();
                    }).error(function () {
                        $(el).remove();
                    }).attr('src', images[index]);
            });

        });

<强> CSS

ul#portfolio { margin:0; padding:0; }
ul#portfolio li { float:left; margin:0 5px 0 0; width:250px; height:250px; list-style:none; }
ul#portfolio li.loading { background: url(http://www.codedigest.com/img/loading.gif) no-repeat center center; width:50px;height:50px}

Answer 5

<img src="image.php">loading...</img>

PHP图像加载

5 个答案:

Check out the DEMO