Дождитесь загрузки изображения перед анимацией

У меня есть приложение, которое загружает список фотографий в массив, а затем один за другим отображает эти фотографии. Предполагается, что он предназначен для скрытия изображения за пределами окна справа. Затем изображение должно перемещаться справа налево, пока оно не попадет в левую границу окна. Однако при загрузке следующего изображения, если изображение занимает некоторое время, чтобы загрузить старые слайды изображений. После загрузки нового изображения он заменяет старое изображение после завершения анимации.Дождитесь загрузки изображения перед анимацией

<body> 
    <img id="bg" class="clicky" alt=""></img> 
more html... 
</body> 


function nextImage(){ // Load the next image and slide in from the right 
    raterReset(); // Function to reset keyboard hotkeys 
    loadImage(); // VBScript function to read the next image and make the filename 
    $("#bg").finish(); 
    updateContainer(); // Function that obtains the window h/w and aspect ratio of image 
    showStatus("Next Image Loaded: " + intPhotoCount + " of " + intFileCount); 
    $("#bg").animate({left: "+="+winW}, 0,function(){ 
     $("#bg").attr("src",objOriginFile); 
     $("#bg").animate({left: "-="+winW}, 1500); 
    }); 
}

Я попытался с помощью:

$("#bg").attr("src",objOriginFile).load(function(){ 
    $("#bg").animate({left: "-="+winW}, 1500); 
});

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

Вот ссылка на настоящий ОМТ. Это должно выполняться в окне с IE 8+.

https://dl.dropboxusercontent.com/u/52558409/Photorater/Photorater.zip

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

источник

2014-08-22 Jedimaster0

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

Давайте предположим, что у вас есть изображения, имеющие ширину установлен 300px:

CSS:

#wrapper { 
    display: block; 
    width: 300px; 
    overflow: hidden; 
} 

#images-container { 
    display: block; 
    width: 1200px; /* the width is calculated as NO_OF_IMAGES*IMAGE_WIDTH */ 
    position: relative; 
} 

#images-container img { 
    display: inline-block; 
}

HTML:

<div id="wrapper"> 
    <div id="images-container"> 
     <img ... /> 
     <img ... /> 
     <img ... /> 
     <img ... /> 
    </div> 
</div>

JS: анимировать #image-container, перемещая его влево, пока все изображения были показаны

источник

2014-08-22 06:57:29

Если я правильно понимаю, это по существу загрузит все изображения при запуске приложения. Если у меня есть 1000 фотографий, это может занять много времени. Особенно, если фотографии находятся по сети. Мне нужно загрузить изображение только при нажатии на «Следующее изображение». Это полноэкранное изображение, поддерживающее соотношение сторон. Ваш ответ будет работать, если бы у меня было всего несколько фотографий. Я буду иметь это в виду для последующих проектов. Благодарю. – Jedimaster0

На самом деле, я использовал ваше предложение и почти полностью переписал свое приложение. Это займет некоторое время, чтобы загрузить изображения, если их много, но увеличение производительности после его завершения стоит того. Если у вас около 50-100 изображений, это неплохо. Благодаря! – Jedimaster0

Вы можете загрузить версию 2.0.0 моего приложения выше, если вы хотите играть с HTAs или просмотреть мой код. Я сделал классный материал с соотношением сторон загружаемого изображения и тем, как он может автоматически подходить к экрану «на лету» даже при изменении размера. – Jedimaster0

Дождитесь загрузки изображения перед анимацией

ответ

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