Загрузка изображений в jQuery

Question

Итак, вот в чем проблема:

Я пытаюсь загрузить изображения с помощью jQuery, чтобы ускорить загрузку страницы. Для этого у меня есть следующий код как изображение, которое я хочу загрузить после загрузки страницы.

<img src="/pixel.png" new-img="/newimage.png"/> 

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

$(document).ready(function(){ 
    $("img").attr("src", $("img").attr("new-img")); 
}); 

Это прекрасно подходит для одного изображения, за исключением того, что у меня есть несколько изображений, которые я хочу преобразовать в это. Я полностью в тупике, когда при попытке загрузить несколько изображений, как это, он устанавливает все изображения на загруженное последнее изображение.

Я не уверен, но «$ (это)» имеет к этому какое-либо отношение?

JSFiddle: http://jsfiddle.net/AeroMcDoom/8sxED/

Answer 1

Использование что:

$("img").attr("src", function(){return $(this).attr("new-img")}); 

FYI, вы должны использовать данных- * атрибут вместо:

<img src="/pixel.png" data-img="/newimage.png"/> 

И потом:

$("img").attr("src", function(){return $(this).data("img")}); 

Answer 2

Попробуйте это:

$("img").each(function(){$(this).attr("src", $(this).attr("new-img"))}); 

.attr на селектор, который соответствует более чем один элемент не будет работать, как вы это делаете. .attr() установит атрибут всех изображений, найденных в его содержимом. Также вы не можете установить его с помощью $("img").attr("new-img"), потому что .attr() всегда возвращает только первое значение, которое он находит из селектора.

Answer 3

$(document).ready(function(){ 
    $("img").each(function(){ 
     $(this).attr('src',$(this).attr("new-img")); 
    }); 
}); 

Answer 4

С немного меньшими затратами:

$(function(){ 
    $("img").each(function(){ 
     this.src = this.getAttribute('data-newimg'); 
    }); 
}); 

Там нет необходимости инициализировать JQuery один или два раза на изображение для этого, если вам не нужно, чтобы это работало на IE6.

Answer 5

Я думаю, что вы можете сохранить дополнительный запрос HTTP, делая это:

<div class="lazy"> 
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA ///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
    data-src="/newimage.png" 
    alt="Good to go" /> 
</div> 

И в JS:

$(window).on('load', function() { 

    $(".lazy > img").each(function(){ 
     var src = $(this).attr('data-src'); 

     $(this).attr('src',src); 
    }); 
});