ajax - проверьте, загружены ли изображения перед записью на страницу

Question

У меня есть небольшая проблема, которую я только что обнаружил после того, как подумал, что этот проект завершен.Он отлично работал на моем локальном сервере, но когда я запускал код в реальном времени, изображения могут загружаться за полсекунды, что приводит к появлению небольшого эскиза страницы поверх загружаемого изображения.grrr

альтернативный текст http://img815.imageshack.us/img815/985/loading.jpg

Так что же происходит?Ну, во-первых, функция запускается на window.load, которая создала большое количество элементов списка с gif загрузки в качестве изображения bg.

Затем эта функция вставляет тег <img> в первый элемент списка сonload, который вызывает вторую функцию

Эта вторая функция циклически просматривает XML-файл, оборачивает URL-адрес в XML в теге <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 и ждать, пока он загрузится ???

Как только страница кэшируется, загрузка, очевидно, работает нормально, но это немного мучительноОн сначала загружается, так что мне нужно это исправить.Любой совет, добро пожаловать :) спасибо

Answer 1

По-моему, ты думаешь тяжело. Иногда решение заключается в изменении мышления. Это полностью зависит от вас. Одна из моих любимых родственных книг.

Мое предложение - что-то вроде кода ниже. Это не совсем то, что вам нужно, но ...

Демонстрация на скрипке

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

Answer 2

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

Answer 3

Перед тем, как добавить его в документ, вы должны убедиться, что изображение загружено браузером, то есть в кеш браузера:

// 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);

Так что для вашего кода я бы сделал:1005 *

Может быть, это просто ваш пример кода, но я не понимаю, почему 0.jpg и sites.xml или остальные изображения не могут быть загружены одновременно:

$(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);
            }
        }
    });
});

Answer 4

Попробуйте:

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

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

Answer 5

Вам просто нужно предварительно загрузить каждое изображение с помощью объекта Image ().Сценарий, приведенный ниже, довольно прост в использовании.Просто напишите в «callbackFN ()» любой код, который вы хотите сделать, и затем вы «preload_images (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);
        }
    }

Answer 6

Благодаря @ 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");

Answer 7

У меня была такая же проблема. пытаясь получить ответ, я дошел до вашего вопроса. В любом случае, мне удалось решить эту проблему путем размещения:

<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>

изображения будут загружаться асинхронно. если у вас уже есть изображение, оно не будет загружено снова, оно будет сохранено в кеше браузера. так что если пользователь потратит 30 секунд на первой странице, то весь ваш сайт будет работать намного быстрее. ну это зависит от размера вашего сайта. но это решает проблему при использовании небольшого веб-сайта.

Я знаю, что это не настоящее решение. Я начну вознаграждение за ваш вопрос.