Javascript перегрузочный загруженного изображения

Question

Следующий фрагмент Javascript предназначен для предварительной загрузки изображения, установить фоновый режим Div на изображение, а затем исчезает все DIV в ...

$("<img/>") 
    .attr("src", "../services/imageResize.php?img=" + img + "&width=150") 
    .load(function(e){ 
     $("<div/>", { 
      class: "smallThumb" 
     }) 
     .css("background", "url(" + $(this).attr("src") + ") no-repeat center center") 
     .appendTo(images) 
     .fadeIn(500); 

     if(count == imgTotal) 
     { 
      loadingImages = false; 
      images.css("background","#fff"); 
     } 
    }); 
count++; 

Я проверил его в Chrome и Сафари; оба исчезают в div, а затем заканчивают загрузку изображения. Я недоумеваю, что заставляет его перезагружать изображение для инструкции .css.

Answer 1

Вы пробовали жестко кодировать изображение на странице и видеть, что происходит? Часть проблемы заключается в том, что вы передаете параметры URL, которые могут сделать изображения уникальными друг для друга.

Answer 2

Это две разные вещи. HTML DOM и CSS, он будет загружать его дважды. Они оба не знают друг о друге. Просто потому, что вы используете ту же самую строку src, это не означает, что они используют один и тот же контент изображения src. Я бы проверил это с изображением src, установленным на один пиксельный тип вещи, а затем загрузив фон. Это хорошо документированный подход к CSS-образам. Также кэширование может помочь, по крайней мере, не запрашивать его дважды с сервера. Хорошая вещь, чтобы сделать так или иначе.

Answer 3

Я думаю, ваша проблема в том, что событие onload срабатывает до того, как изображение будет полностью загружено. Если вы предполагаете, что изображение полностью загружено, оно будет выглядеть как перезагрузка.

img.onload будет запускаться всякий раз, когда баузер готов отображать изображение. Нельзя гарантировать, что изображение будет полностью загружено. Единственный способ проверить, полностью ли загружено изображение, - это атрибут img.complete.

Некоторое время назад я ответил на вопрос How to monitor an image source for fully loaded status

После ответа я написал небольшую jQuery plugin which utilizes the complete attribute.

Вы можете использовать его, например.

$(function() { 
    $.preload('your-image.png').progress(function (img) { 
     // set background 
     $('body').css('background', 'url(' + img.src + ')'); 
    }); 
});