Selector context VS. .find()

Nu de puține ori am văzut cod scris așa:

var parinte = $('#parinte'), 
    alt_parinte = $('#alt-parinte');
parinte.find('.copil');
alt_parinte.find('.alt-copil');

Chiar dacă nu este nimic greșit în acest cod, .find() s-ar putea scrie ceva mai pe scurt, folosind o chestie ce se numește selector context

var parinte = $('#parinte'), 
    alt_parinte = $('#alt-parinte');
$('.copil', parinte)
$('.alt-copil', alt_parinte);

Intern, jQuery folosește cea de-a doua metodă ca scurtătură pentru prima. Teoretic, .find() ar fi mai rapid. Practic, din testele făcute de mine în Firefox și Chrome, diferențele de performanță sunt atât de mici încât sunt neglijabile.

Pe de altă parte, la fiecare select contextual salvezi câte șase caractere. Poate nu pare mult, dar la o aplicație ceva mai complexă poți avea lejer câteva zeci (poate chiar sute) de apelări .find().

Ieri am decis că ar fi cazul să încerc ceva nou: Bing. Am setat chrome să folosească Bing ca motor de căutare implicit și tot ce am căutat am încercat să caut prin sus-numitul motor de căutare. Doar că… socoteala de acasă nu se potrivește cu cea online și am început să observ două chestii:

  1. Relevață ce tinde spre zero. Nu, nu contează că sunt autentificat sau că folosesc Chrome. Cu IE10 sunt FIX aceleași rezultate.
  2. Dacă dezactivezi safe search, Bing Imagini îți găsește o grămadă de porn pentru multe cuvinte.

Chiar dacă google îmi urmărește absolut orice mișcare online, cel puțin pot găsi ce caut.

Indicator pentru imaginile încărcate

Ieri a trebuit să fac un preloader pentru un site ce conține foarte multe imagini (peste 50 bucăți, fiecare de minim 100kb). Am zis că dacă tot fac preloader, să fac și un indicator. Și dacă tot le-am făcut, hai să pun și pe blog :)

jQuery(document).ready(function($){
  var allImages     = $('img'),
      totalImages   = allImages.length,
      loadedImages  = 0,
      preloader     = $('<div class="preloadImages">Loading <span></span>%</div>').appendTo('body');

  $(allImages).each(function(i, img){
    var preload = new Image();
    preload.onload = function(){
      $('span', preloader).text( Math.round( loadedImages / totalImages * 100 ) );
      loadedImages = loadedImages + 1;
      if( loadedImages >= totalImages ){
        preloader.fadeOut();
      }
    }
    preload.src = img.src;
  });
});

Este atât de simplu!

windows apple dropbox facebook twitter