Они используют кэш миниатюр с этого URL
http://ts1.mm.bing.net/images/thumbnail.aspx?q=NUM&id=HASH
, где HASH и NUM (как-то) являются ссылками на определенный эскиз.
Например,NUM = 1148286928700 и HASH = d2f4bbf91a853cefbc18794b6eb9ecdd являются ссылкой на этот эскиз .
Конечно, миниатюры имеют меньший размер файла, чем большие изображения, поэтому Yahoo!сначала загружается из кэша миниатюр, чтобы дать пользователю представление о том, что изображение, и загружает полноразмерное изображение в фоновом режиме.
Я подозреваю, что метод, который они используют, это загрузка изображения в скрытое img, а затем привязать к событию load этого тега изображения функцию, которая заменяет миниатюру src полноразмерным изображением src.Следовательно, когда (скрытое) полноразмерное изображение загружается, оно заменяет уменьшенное изображение, которое мы видим при загрузке страницы.
Давайте предположим, что уменьшенное изображение загружено в тег img с идентификатором main_image и наше полноразмерное изображение загружается (в фоновом режиме) в скрытый тег img с идентификатором secondary_image.Затем мы связываемся с событием load #secondary_image и заменяем src из #main_image при загрузке:
$('#secondary_image').load(function() {
// on big image load, replace the src of the thumbnail image
$('#main_image').attr('src', $(this).attr('src'));
}
Затем, когда пользователь желает просмотреть другое изображение, мы заменяем src из #main_image с другой кэшированной миниатюрой, замените src из #secondary_image большим изображением и снова свяжите событие load (так что в идеале вы должны создать функцию с приведенным выше кодом и вызватьэта функция всякий раз, когда вы меняли #secondary_image src.