1

可能であれば、2 つの匿名関数を結合して、一方が他方の実行後に実行されるようにするにはどうすればよいですか?

私の試み：

    $(function() { 
        $('body').addClass("loading"); 
        function preload(arrayOfImages) {
            $(arrayOfImages).each(function(){
                $('<img/>')[0].src = this;
            });
        }

    },
    $(function() { 
        $('body').removeClass("loading"); 
        }); );

機能:

    $(function() { 
        $('body').addClass("loading"); 
        function preload(arrayOfImages) {
            $(arrayOfImages).each(function(){
                $('<img/>')[0].src = this;
            });
        }

    });

    $(function() { 
        $('body').removeClass("loading"); 
        });

JCOLEBRANDS コード:

   function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $(this[0]).src = this[1];
    });
    $('body').removeClass("loading"); 
}
$(function() { 
    $('body').addClass("loading"); 
})


$(document).ready(function () {     


   var preloadi = [
        ['selector1','WCMSWR/_assets/images/images/1.png'],
        ['selector2','WCMSWR/_assets/images/images/2.png'],
        ['selector3','WCMSWR/_assets/images/images/3.png']
   ];



    preload(preloadi);
});
4

3 に答える 3

2

代わりにこれを試してください（ロジックがすべてです）：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $(this[0]).src = this[1];
    });
    $('body').removeClass("loading"); 
}
$(function() { 
    $('body').addClass("loading"); 
};
///
/// elsewhere
///

///I'm also updating your array call because it doesn't make much sense, sadly to me
///otherwise you're overwiting all images with the same image every time. 
///I think it makes much more sense to have a set of hidden images in the 
/// footer of the page so the browser keeps them in memory/cache
$(document).ready(function () {
   preload([
        ['selector1','WCMSWR/_assets/images/images/1.png'],
        ['selector2','WCMSWR/_assets/images/images/2.png'],
        ['selector3','WCMSWR/_assets/images/images/3.png']
   ]);
 });

そのため、ロード クラスを追加する onload を実行し、ロードが完了したら、最後にクラスを削除します。

ただし、表向きは、次のように構成します: (jQuery の現在のリリース [>=1.8] を想定)

function loadSomeImages(arrayOfImages){
  $.Deferred(function(){

    $('body').addClass("loading"); 

  }).then(function(){

    $(arrayOfImages).each(function(){
      $(this[0]).src = this[1];
    });

  }).done(function(){

    $('body').removeClass("loading"); 

  }).resolve();
}
///
/// elsewhere
///
$(document).ready(function () {
   preload([
        ['selector1','WCMSWR/_assets/images/images/1.png'],
        ['selector2','WCMSWR/_assets/images/images/2.png'],
        ['selector3','WCMSWR/_assets/images/images/3.png']
   ]);
 });

そして、遅延を使用して各処理が完了するまで待機しているため、ジッター (IE のバグ) に縛られず、意図したことに対してコードがクリーンであり、実行するように命令しました。正しい方法。

うまくいけば、これはあなたが基本的に意図したことであり、役に立ちます。

また、オブジェクトを「名前空間」にすることをお勧めします。以下のように、前の例を拡張しました。

window.sephiith = window.sephiith | {};
window.sephiith.loadSomeImagesDeferred = null;
window.sephiith.loadSomeImages = function loadSomeImages(arrayOfImages){
  sephiith.loadSomeImagesDeferred = $.Deferred(function _startArrayOfImages(){

    $('body').addClass("loading"); 

  });
  sephiith.loadSomeImagesDeferred.then(function _applyArrayOfImages(){

    $(arrayOfImages).each(function(){
      $(this[0]).src = this[1];
    });

  });

  sephiith.loadSomeImagesDeferred.done(function _doneArrayOfImages(){

    $('body').removeClass("loading"); 
    sephiith.loadSomeImagesDeferred = null;
  });
  return sephiith.loadSomeImagesDeferred;
}
///
/// elsewhere
///
$(document).ready(function () {
   preload([
        ['selector1','WCMSWR/_assets/images/images/1.png'],
        ['selector2','WCMSWR/_assets/images/images/2.png'],
        ['selector3','WCMSWR/_assets/images/images/3.png']
   ]);
 }).resolve();

この名前空間により、コードが「他のユーザーの」コードに干渉しないことが保証されます。やり過ぎのように思えるかもしれませんが、時間の経過とともに、このネームスペースは良い方向に進んでいます。またsephiith.loadSomeImagesDeferred、コード内の他の場所に値があるかどうかも確認できるようになったため、まだ画像を読み込んでいることがわかります。同様に役立ちます。たぶん、これが終わったら何か他のことをしたいですか？

if(sephiith.loadSomeImagesDeferred) /* sanity check to make sure we didn't already null it out */ {
  // TODO: track sephiith.loadSomeImagesDeferred to add a new function #NEWFUNCTION
  sephiith.loadSomeImagesDeferred.then(function _NEWFUNCTION(){ /* do more stuff here */ });
} else {
  console.log( 'sephiith.loadSomeImagesDeferred was already nulled out before #NEWFUNCTION!!' );
}

そのため、ページが読み込まれるときにこれらすべての遅延アイテムを構築できるため、 を押すとloadSomeImages(things);、完了する前にこれらすべてのアイテムが起動します。

これは非常に斬新なことDeferredかもしれないので、意味をなさない場合でも心配はいりませんが、これにより、コードが実現したいことをより意図的に表現できるようになります。#NEWFUNCTIONまた、何か他のものを追加したかったのに間に合わなかったと自分に言い聞かせたことにも注意してください。(また、常に匿名関数に名前を付けてください。これにより、スタックトレースの追跡が非常に簡単になります。)

そのため、最後の例は実際にはやや複雑になりました。その上に HR を追加して、「サメを飛び越えた」場所を簡単に判断できるようにしました。そして、私はアナル開発者であり、物事をよりクリーンにしたいと考えています...ここにさらにいくつかの改良点があります。うまくいけば、このコード進行は理にかなっています:

window.sephiith = window.sephiith | {};
sephiith.loadSomeImagesDeferred = null;
sephiith._startArrayOfImages = function _startArrayOfImages(){
    $('body').addClass("loading"); 
};
sephiith._doneArrayOfImages = function _doneArrayOfImages(){

    $('body').removeClass("loading"); 
    sephiith.loadSomeImagesDeferred = null;
    sephiith._ArrayOfImages = {};
};
sephiith._ArrayOfImages = {};
sephiith._applyArrayOfImages = function _applyArrayOfImages(){

    $(sephiith._ArrayOfImages).each(function(){
      $(this[0]).src = this[1];
    });

};

sephiith.loadSomeImages = function loadSomeImages(arrayOfImages){
  sephiith._ArrayOfImages = arrayOfImages;

  sephiith.loadSomeImagesDeferred = $.Deferred(sephiith._startArrayOfImages);

  sephiith.loadSomeImagesDeferred.then(sephiith._applyArrayOfImages);

  sephiith.loadSomeImagesDeferred.done(sephiith._doneArrayOfImages);
  return sephiith.loadSomeImagesDeferred;
}
///
/// elsewhere
///
$(document).ready(function () {
   preload([
        ['selector1','WCMSWR/_assets/images/images/1.png'],
        ['selector2','WCMSWR/_assets/images/images/2.png'],
        ['selector3','WCMSWR/_assets/images/images/3.png']
   ]).resolve();
 });

///
/// elsewhere
/// notice we're still loading the page, so we haven't called the onready of the preload
///
if(!sephiith._newFunction) {
  sephiith._newFunction = function _NEWFUNCTION(){ /* do more stuff here */ console.log(sephiith._ArrayOfImages); };
} else {
  console.log('sephiith._newFunction was already defined, not defining again');
}


if(sephiith.loadSomeImagesDeferred) {
  // TODO: track sephiith.loadSomeImagesDeferred to add a new function #NEWFUNCTION
  sephiith.loadSomeImagesDeferred.then(sephiith._newFunction);
} else {
  console.log( 'sephiith.loadSomeImagesDeferred was already nulled out before sephiith._newFunction could be added!!' );
}

追記: 私はこれをテストしませんでした。私は基本的にあなたが望むものに基づいて私のワークスペースから書いたので、バグがあるかもしれませんが、これはあなたが望むことを効果的に行うはずです.

于 2013-05-29T00:23:29.887 に答える
0

すべてを 1 つの無名関数に入れてみませんか? いつものように電話preload()してください。

$(function() { 
    $('body').addClass("loading"); 

    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
        });
    }

    $('body').removeClass("loading"); 

});
于 2013-05-28T23:31:50.510 に答える
0 
$(document).ready(function () {     
    var preload = [
           'WCMSWR/_assets/images/images/1.png',
           'WCMSWR/_assets/images/images/2.png',
           'WCMSWR/_assets/images/images/3.png'
    ];

    function preload(arrayOfImages) {
        $('body').addClass("loading");
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
        });
        $('body').removeClass("loading");
    }

    preload(preload);
});
于 2013-05-28T23:31:54.713 に答える