代码之家 › 专栏 › 技术社区 › Adam Tomat

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

image ajax jquery

Adam Tomat · 技术社区 · 14 年前

我有一点问题,我刚刚发现,在我认为这个项目已经完成。它在我的本地服务器上运行得很好,但当我实时推送代码时,图像可能需要半秒钟才能正确加载,从而在加载的图像上弹出一个小页面缩略图。吼叫声

发生了什么事?首先,函数运行在 window.load

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

第二个函数循环遍历XML文件,并将XML中的URL包装为 <img> 标记并放入下一个空的 LI . 这就是问题所在。现在它把 <img src=$variable onload=loadnextimage() />

我的代码:

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

一旦页面缓存加载显然工作正常,但它的第一次加载有点痛苦,所以我需要修复这个。

7 回复 | 直到 5 年前

Tooraj Jam 12 年前

依我看,你的想法很难。有时解决办法是改变思维方式。这完全取决于你。 One of my favorite related books.

我的建议是有一些像下面的代码。这不完全是你需要的,但是。。。

Demo on Fiddle

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

thecodeparadox 12 年前

success: function(xml) {
    var img = $(xml).find('image[id=' + i + ']'),
        id = img.attr('id'),
        url = img.find('url').text();
    // hide loading
    $('#loading'+i).hide();
    $('<img src="'+url+'" onLoad="loadImages('+i+')" />').load(function() {
       // after image load
       $('#loading' + i).html(this); // append to loading
       $('#loading'+i).fadeIn(); // fadeIn loding
    });
}

Tono Nam 12 年前

我也有同样的问题。为了得到答案,我问了你的问题。不管怎样,我解决问题的方法是:

<div style="visibility:hidden; position:absolute; margin-left:-10000px;">
   <img src="foo.png" /> 
    // place all the images in here that you eventually will need
</div>

Community Egal 7 年前

感谢 @thecodeparadox

$.get("SomePage.aspx", "", function (r) {

    // r = response from server

    // place response in a wrapper
    var wrapper = $('<div id="wrapper" style=""></div>').html(r);

    // need to write the images somewhere in the document for the event onload to fire
    // loading content is a hidden div in my document.
    $(document).append(wrapper);
    //$("#LoadingContent").html("").append(wrapper);

    var counter = 0;

    var images = $(wrapper).find("img"); // get all the images from the response

    // attach the onload event to all images
    images.bind("load", function () {

        counter++;

        if (counter == images.size()) { // when all images are done loading
            // we are now save to place content
            // place custom code in here
            // executeSomeFuction();
            $("#AjaxContent").html(r); 
            $(document).remove(wrapper);
        }
    });

}, "text");

Bene 12 年前

只需使用Image()对象预加载每个图像。下面的脚本非常容易使用。只需在“callbackFN()”中编写您想执行的任何代码,然后“预加载图像(array\img)”。更确切地说:

   var array_images = [];
   $.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();
                    array_images.push(url);
                }
            });




// Your callback function after loading:
function callbackFN() {
   // Do whatever you want HERE
   // Pretty much this:
   for (var i = 1; i<=array_images.length; i++) {
      $('#loading'+i).html('<img src="'+url+'" />').hide();
      $('#loading'+i).fadeIn();
   }
}


var array_obj = Array();
var iKnowItsDone = false;
// Timer (IE BULLET PROOF)
var ieCheckImgTimer;
        // Check if images are loaded
    function images_complete(obj) {
        var max = obj.length;
        var canGo = true;
        for (var i = 0; i<max; i++){
            if (!obj[i].complete) {
                canGo = false;
            }
        }
        return canGo;
    }
    // Loop to check the images
    function preload_images(obj) {
        var max = obj.length;
        for (var i = 0; i<max; i++){
            var img = new Image();
            img.src = obj[i];
            array_obj.push(img);

            img.onload = function() {
                check_img();
            }
        }
        ieCheckImgTimer = setTimeout('check_img()',250);
    }

        // Timer to see if all the images are loaded yet. Waits till every img are loaded
    function check_img() {
        if (ieCheckImgTimer) {
            clearTimeout(ieCheckImgTimer);
        }
        if (images_complete(array_obj) && !iKnowItsDone) {
            iKnowItsDone = true;
            callbackFN();
        }
        else {
            ieCheckImgTimer = setTimeout('check_img()',250);
        }
    }

Austin Ow 12 年前

试试这个:

ThumbImage = document.createElement("img");
ThumbImage.src = URL;

ThumbImage.onload = function(){
    //function After Finished Load                      
}

Jeffery To 12 年前

// create an image element
$('<img />')
    // add a load event handler first
    .load(function() {
        // append the image to the document after it is loaded
        $('#loading').append(this);
    })
    // then assign the image src
    .attr('src', url);

所以对于你的代码我会:

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

    }
    document.getElementById('page-wrap').innerHTML=txt;

    $('<img />')
        .load(function() {
            $('#loading0').append(this);
            loadImages(0);
        })
        .attr('src', 'images/0.jpg');
});
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();

            $('<img />')
                .load(function() {
                    $('#loading' + i)
                        .append(this)
                        .hide()
                        .fadeIn();
                    loadImages(i);
                })
                .attr('src', url);
        }
    });
}

$(window).load(function() {
    var buf = [], d;
    for (d = 0; d < 100; d++) {
        buf.push('<li class="gif" id="loading' + d + '"></li>');
    }
    $('#page-wrap').html(buf.join(''));

    $('<img />')
        .load(function() {
            $('#loading0').append(this);
        })
        .attr('src', 'images/0.jpg');

    $.ajax({
        type: 'GET',
        url: 'sites.xml',
        dataType: 'xml',
        async: true,
        success: function(xml) {
            var img, id, url, i;

            xml = $(xml);

            for (i = 1; i < 100; i++) {
                img = xml.find('image[id=' + i + ']');
                id = img.attr('id');
                url = img.find('url').text();

                $('<img />')
                    .load(function() {
                        $('#loading' + i)
                            .append(this)
                            .hide()
                            .fadeIn();
                    })
                    .attr('src', url);
            }
        }
    });
});