Загрузите два изображения в один тег img один за другим

Я хочу загрузить два изображения в одном теге <img />. Первое маленькое изображение будет показано атрибутом src, а второе большое изображение будет внутри атрибута data-src, но сразу будет показано одно изображение, которое будет в атрибуте src. Я хочу, чтобы при загрузке страницы небольшое изображение загрузилось и отобразилось первым, и после завершения загрузки большого изображения в фоновом режиме оно будет заменено маленьким изображением, чтобы мы могли видеть большое изображение. У меня есть код, который займет большое изображение с атрибута data-src и поместит крупное изображение в атрибут src.Загрузите два изображения в один тег img один за другим

$(document).ready(function(){ 
    $("#image4").load(function(){ 
     var imgDefer = document.getElementsByTagName('img'); 
     for (var i=0; i<imgDefer.length; i++) { 
      if(imgDefer[i].getAttribute('data-src')) { 
       imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src')); 
      } } 
    }); 
});

Я хочу, чтобы это сделать, потому что я не хочу ждать в течение длительного времени, чтобы загрузить увеличенное изображение, вместо этого я хочу видеть маленькое изображение первого. Я столкнулся с проблемой при загрузке страницы, это загрузка небольших и больших изображений параллельно. Для ваших информационных изображений есть функция перетаскивания и масштабирования. Текущий код в реальном времени находится здесь: http://virtualepark.com/new1/demo.html

источник

2016-07-08 Rohit Chaudhary

Вы не можете этого сделать. Теги изображения являются самозакрывающимися и принимают только один атрибут 'src'/ –

, так как вопрос отмечен jquery и javascript, можно загрузить изображения @Paulie_D – fehrlich

Код, который вы разместили здесь, не размещен на вашем сервере - есть другие вещи, используя mousewheel -event.

Попробуйте загрузить большое изображение скрыто в фоновом режиме, и как только его загрузке, установите URL видимого изображения:

//get all images 
$('img').each(function(i, img) { 
var img = $(img); 
//if they have a data-src 
if(img.attr('data-src')) { 
    //register for the load-event for the initial image 
    img.one('load', function() { 
    //if small image is loaded, begin loading the big image 
    //create new hidden image 
    var hiddenImg = new Image(); 
    hiddenImg.onload = function() { 
      //if the hidden image is loaded, set the src-attribute of the 
      //real image (it will show instantly) 
      img.attr('src', img.attr('data-src')); 
     }; 
     //trigger loading of the resource 
     hiddenImg.src = img.attr('data-src'); 
    }); 
    }); 
});

(кредиты на Load image from url and draw to HTML5 Canvas)

источник

2016-07-08 09:37:49

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

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

Спасибо, что работает !!! –

вы можете загрузить на скрытый тег и после нагрузка полностью изменит их.

источник

2016-07-08 09:37:51

вы можете попробовать начать загрузку после загрузки изображения.

$('img').load(function(){ 
    var bigImgSrc = $(this).data('src'); 
    var img = $(this); 

    if(bigImgSrc != img.prop('src')){ 
     var bigImg =$('<img>').prop('src', bigImgSrc); 
     bigImg.load(function(){ 
     img.prop('src', bigImgSrc); 
     }); 
    } 
});

Я не 100% уверен, что если вам нужно добавить в bigImg к DOM или если он также загружает, как это. Если вам нужно добавить его в DOM, используйте bigImg.hide().appendTo('body'), а затем используйте функцию remove funtion при загрузке.

Вы также должны знать, что нагрузка-функция не работает во всех случаях, см https://api.jquery.com/load-event/

редактировать там была в петле бесконечности в пред. код примера

источник

2016-07-08 12:02:27 fehrlich

Загрузите два изображения в один тег img один за другим

ответ

Смежные вопросы