Question

我有一张世界地图，用户可以选择地区或大陆来查看按该地区国家/地区分类的公司/产品。地图的加载时间有点太长，所以我要加载一个loader.gif。我知道我这样做的方式是不正确的，因为只有加载了地图后才能覆盖loader.gif，但它仍然存在。知道如何启动和停止加载器显示？

感谢您的反馈

这是我的代码：

                   <?php

           class kazino
           {
           private $db;
           private $cms;
           private $valid;
           private $data;

           public function __construct()
           {
           $reg = Registry::getInstance();
           $this->db = $reg->get('db');
           $this->cms = $reg->get('cms');
           $this->valid = $reg->get('Validate');
           $this->data = $reg->get('data');
           }

           public function get_kazino()
           {
           $lang = language::getLang();
           $ret = '
    <div class="add_company_link"><a href="rus/reklama/casino">' . l::add_casino() . '</a><br /><span>' . l::free() . '</span></div>
        <div class="casino_loader"></div> //THIS IS MY LOADER
        <div class="start" id="back_map_img" style="text-align:center; width:810px; margin-left:auto; margin-right:auto; ">
            <img id="Image-Maps" src="styles/them_01/img/blank.gif" usemap="#Image-Maps" border="0" width="810" height="425" alt="" />
            <map id="_Image-Maps" name="Image-Maps">
                <area shape="poly" coords="605,306,637,288,660,278,668,298,671,280,698,286,713,268,754,292,736,362,694,396,660,386,644,375,621,354,593,353,594,330,596,317," href="' . $lang . '/casino/continent/12" id="Oceania" class="Oceania" alt="Oceania" title="Oceania"   />
                <area shape="poly" coords="523,98,538,96,543,90,580,97,587,86,620,104,627,117,659,105,657,160,652,197,642,232,653,237,676,248,707,251,695,285,664,274,649,267,631,275,620,277,606,276,579,268,568,253,572,257,566,245,557,236,558,226,565,219,565,209,549,189,560,161,545,163,521,156,519,153,500,127," href="' . $lang . '/casino/continent/8" id="ESAsia" class="ESAsia" alt="East & Southeast Asia" title="East & Southeast Asia"   />
                <area shape="poly" coords="516,221,512,211,507,198,504,191,497,186,490,174,481,172,478,168,482,165,479,157,476,149,477,142,482,138,486,133,495,132,511,137,516,140,517,150,527,156,539,162,548,162,553,158,561,162,551,184,534,198,534,215,534,218,536,233,525,235," href="' . $lang . '/casino/continent/9" id="SAsia" class="SAsia" alt="South Asia" title="South Asia"   />
                <area shape="poly" coords="454,127,445,123,437,118,422,112,425,98,421,96,408,88,399,79,398,66,402,62,395,43,422,11,531,15,583,24,627,38,675,41,690,53,673,74,664,104,642,108,629,121,622,118,620,110,623,108,622,101,616,102,608,99,588,86,585,98,575,97,567,97,558,95,544,91,541,96,533,95,521,100,515,108,514,119,502,128,506,133,506,133,494,133,485,135,478,141,474,134,466,131,459,133," href="' . $lang . '/casino/continent/7" id="CAsia" class="CAsia" alt="Central Asia" title="Central Asia"   />
                <area shape="poly" coords="395,129,407,117,426,114,448,119,454,133,464,131,473,134,480,153,482,164,475,200,461,205,442,210,436,200,428,180,418,163,419,157,416,151," href="' . $lang . '/casino/continent/10" id="MEast" class="MEast" alt="Middle East" title="Middle East"   />
                <area shape="poly" coords="317,93,319,64,302,54,324,45,350,61,371,40,360,16,386,17,396,36,400,59,394,68,409,88,424,98,419,112,401,124,396,140,389,143,379,140,362,132,350,133,339,136,330,138,316,136," href="' . $lang . '/casino/continent/6" id="Europa" class="Europa" alt="Europa" title="Europa"   />
                <area shape="poly" coords="327,138,311,154,298,177,296,208,317,238,350,240,364,279,362,299,371,332,381,356,411,348,433,328,451,327,464,283,441,279,444,248,465,213,459,207,443,212,439,206,419,163,415,149,370,142,362,132," href="' . $lang . '/casino/continent/5" id="Africa" class="Africa" alt="Africa" title="Africa"   />
                <area shape="poly" coords="159,235,152,263,179,332,189,396,204,414,233,413,246,370,253,324,270,283,272,253,221,217,184,204,173,210," href="' . $lang . '/casino/continent/3" id="SAmerica" class="SAmerica" alt="South America" title="South America" />
                <area shape="poly" coords="131,203,139,192,157,171,197,185,201,193,192,207,177,204,174,208,165,223,161,233," href="' . $lang . '/casino/continent/2" id="CAmerica" class="CAmerica" alt="Central America" title="Central America" />
                <area shape="poly" coords="122,206,128,200,143,195,157,173,174,155,220,126,253,103,257,82,258,81,284,65,363,10,353,0,321,0,0,0,0,28,76,178,96,200," href="' . $lang . '/casino/continent/1" id="NAmerica" class="NAmerica" alt="North America" title="North America" />
            </map>
        </div>
        <div class="select_map">' . l::select_region() . '</div> //THIS IS JUST TEXT
';

Answer 1

我通常将loader.gif作为包含元素的CSS background-image，这样当图像加载时，它会覆盖背景图像。

如果这就是你正在做的事情，我认为没有任何伤害。

Answer 2

当您将jQuery标记添加到您的问题中时，我认为可以将此技术用作解决方案。

当你结合元素创建，ajax调用和回调函数时，你可以很容易地实现你想要的东西：

var loader = $('<img src="loader.gif">');
$('#insert-loader-here').empty().append(loader);
$.get(
    'loadMap.php',
    function(retVal){
        // do stuff
        $('#insert-loader-here').empty();
    }
);

如果没有完整的代码，很难描述它。您甚至可能需要重写代码的某些部分才能实现此目的。 loadMap.php应以某种格式返回您的地图数据（json / xml / ...）。一旦你成功接收到数据，就会执行ajax调用中的回调函数。理想情况下，回调函数会创建整个<map>元素。最好学习一下关于ajax的事情 - 谷歌搜索一些教程。

为什么我坚持使用ajax？这很简单 - 加载器必须显示后台中正在进行的操作。当它停止时，你必须知道它停止了。回调函数是这里的最佳选择。而ajax是用于后台（异步）操作的最佳工具。

如何添加一个loader.gif，它将显示在PHP中加载图像（map）之前

2 个答案: