2

私はこのスクリプトを使用しています...

URL の特定の #id から現在のページにコンテンツをロードし、アニメーション化します...ページの横からスライドします...ユーザーがリンクをクリックすると

画像の読み込みに時間がかかることを除いて、すべてが機能します...これに画像プリローダーを組み込むのに苦労しましたか? したがって、すべてのコンテンツが一緒に読み込まれます

function goTo(href) {

    var left = $(window).width();
    $('#id').css("left", left);

    $.ajax({
        url: href,
        success: function (data) {

            var content = $(data).find('#id').html();

            // Windows Load Function
            $(window).load(function () {

                $("#id").html(content).animate({
                    left: '0',
                }, 'fast');

                var title = $('#id').find('h1').text();
                $('head').find('title').text(title);

            });
        }
    });
}

// check for support before we move ahead

if (typeof history.pushState !== "undefined") {
    var historyCount = 0;

    // On click of link Load content and animate
    $('.access a').live('click', function () {

        var href = $(this).attr('href');

        goTo(href);

        history.pushState(null, null, href);
        return false;
    });

    window.onpopstate = function () {
        if (historyCount) {
            goTo(document.location);
        }
        historyCount = historyCount + 1;
    };
}
4

2 に答える 2

5

ウィンドウ ロード イベントは 1 回だけ発生します。やりたいことは、コンテンツを html フラグメントに解析し、画像をループしてプリロードし、コンテンツを追加することです。

// this contains the content we want to append
var $content = $(data).find('#id').children();
// these are the images that are in content that we need to preload
var $images = $content.find("img").add($content.filter("img"));
// keep track of successfully preloaded images
var counter = 0;
// deferred object that will resolve when all images are preloaded
var $def = $.Deferred();
$images.each(function(){
    // if image is already loaded, increment counter and move on.
    if (this.complete || this.readystate === 4) {
        counter++;
        // if all images are preloaded, resolve deferred object
        if (counter === $images.length) $def.resolve();
    }
    else {
        // since the image isn't already preloaded, bind the load event.
        $(this).load(function(){
            counter++;
            // if all images are preloaded, resolve deferred object
            if (counter === $images.length) $def.resolve();
        });
    }
});
// when done preloading, this function will happen.
$def.done(function(){
    // empty target element and append content to it, then animate it.
    $("#id").empty().append($content)
        .animate({
            left: '0'
        }, 'fast');

    var title = $('#id').find('h1').text();
    $('head').find('title').text(title);
});
于 2012-08-01T21:18:45.573 に答える
-1

どのような画像が表示されるかを事前に知っておく必要があります。次に、HTML 本文に次のようなものを追加する必要があります。

<div id="img-preloader">
  <p>If you're seeing a crapton of images here, that's a bug. Just ignore them.</p>
  <!-- No "display:none" because some browsers completely ignore this then -->
  <img alt='' src="some/image.jpg" />
  <img alt='' src="another_image.png" />
  <img alt='' src="img78236.bmp" />
  <img alt='' src="img046502.jpg" />
  <img alt='' src="DCIM732065230.jpg" />
  <img alt='' src="DCIM478346935.jpg" />
  <!-- all the images here are those that you have to preload -->
</div>
<style type="text/css">
  #img-preloader *{height:0; width:0; opacity:0;}
  #img-preloader {margin-left:-6543467624px;position:absolute;
                  visibility:hidden;height:0;width:0;opacity:0}
</style>

どの画像をプリロードする必要があるかを予測する方法がないため、そこに表示されることがわかっている画像でのみこれを行うことができます。また、画像が多い場合は、最初のページの読み込みが遅くなるため、プリロードはまったくお勧めしません。

于 2012-08-01T21:25:03.177 に答える