Предварительная загрузка изображений в Javascript? Без jQuery

На форуме есть несколько вопросов, но я не мог получить хороший ответ за то, что мне нужно.Предварительная загрузка изображений в Javascript? Без jQuery

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

У меня есть 3 файла: «main.html», где объявлен холст (есть только один в этом примере), и я пытаюсь для загрузки изображения «ImagePreloader.js», где я предварительно загружаю все изображения и «Variables.js», где у меня есть переменные.

Может ли кто-нибудь помочь мне с этим предпродажным способом изображения или предложить мне жизнеспособный? Я думаю, что изображение не загружается, потому что я не использую функцию onLoad(), которую я не мог понять в учебниках, которые я читал до сих пор (я знаю, как применять его к изображению, но не к массиву изображений)

main.html:

<!DOCTYPE HTML> 
<html> 
    <body> 
    <canvas id="myCanvas" width="800" height="600"></canvas> 

    <script type="text/javascript" src="Variables.js"></script> 
    <script type="text/javascript" src="ImagePreloader.js"></script> 
    <script> 
    // Basic canvas info 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    // Draw one of the images. Somehow it doesn't work :(
    context.drawImage(imageArray[3], x, y, width, height); 
    </script> 
    </body> 
</html>

ImagePreloader.js

// This should preload the images in imageArray[i] with 0 <= i <= 5 ... right? 
function preloader() 
{ 
    for(var i=0; i<5; i++) 
    { 
      imageArray[i].src=images[i]; 
    } 
}

Variables.js

// array of sources of my images 
images = new Array(); 
images[0]="img1.jpg" 
images[1]="img2.jpg" 
images[2]="img3.jpg" 
images[3]="img4.jpg" 
images[4]="img5.jpg" 

// Stuff to draw the image 
var x = 50; 
var y = 50; 
var width = 256; 
var height = 256; 

// Is this actually an array of images? 
imageArray = new Image();

Спасибо заранее!

источник

2013-07-03 CookieGuy

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

"onload" - это событие javascript, которое происходит сразу после загружается. Другими словами: onLoad походит на функцию javascript-native, которая запускает, когда загружается что-то. Это что-то может быть окном (например: window.onload) или документом. То, что вы хотите, - это событие documentLoad, поскольку оно запускается при загрузке документа.

Давайте предоставить вам простой пример ...

<body onload="preloadMyImages();">

Это говорит браузеру «когда вы загрузили документ, запустите preloadMyImages функцию».

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

function preloadMyImages() 
{ 
    var imageList = [ 
     "image.gif", 
     "example/image.jpg", 
     "whatever/image.png" 
    ]; 
    for(var i = 0; i < imageList.length; i++) 
    { 
     var imageObject = new Image(); 
     imageObject.src = imageList[i]; 
    } 
}

Это практически завершает работу и дает вам полностью рабочий пример. Наслаждайтесь!

EDIT

С - в соответствии с вашим комментарием - вы ищете больше некоторую помощь, я хотел бы указать вам на https://stackoverflow.com/a/1038381/2432317, которые (как один из многих примеров) показывает, как это можно (и, вероятно, должен - в зависимости от того, что вы планируете делать на своем холсте) также используйте img.onload.

Однако, как я заявил в своем комментарии: все будет зависеть от того, где вы хотите его принять. Чем больше вы погружаетесь в кодировку Javascript, тем больше вы поймете, что происходит. Существует несколько хороших (частично свободных) книг, объясняющих, как кодировать Javascript, использовать холст HTML5, создавать предварительные загрузчики, анимации, говорить о облаках и т. Д.

Быстрая проверка на большом G поисковых систем показывает множество примеров и учебники тоже, которые будут полезны для вас. Один из многих примеров: «How To Draw Images Onto Your HTML5 Canvas», который показывает предварительную загрузку и циклизацию анимации в кратком и четком учебнике.

Но, пожалуйста, не ждите от нас кода для вас - это не произойдет. Это один из не очень редких случаев, когда «учиться на практике» на самом деле сделает вас умнее. И если вы столкнетесь с другой проблемой на пути к своей конечной цели, вы всегда можете опубликовать новый вопрос, связанный с этой новой проблемой.

источник

2013-07-03 05:32:32

В этом примере я не могу использовать imageObject вне этой функции ... или я понимаю неправильную область в JavaScript? – CookieGuy

Да, ты прав. В этом примере показано, что делает «onload» и как его использовать для прелоадера, который работает, и это то, что вы просили. Остальная часть вашего кода зависит от того, где вы хотите его взять. Если вам нужны переменные в другой области, определите и используйте их соответственно. Имейте в виду, что никто здесь не закодирует ваш сайт для вас. И если вам нужно узнать о масштабах в Javascript, я бы посоветовал вам взять одну из нескольких хороших книг Javascript. Но, снова глядя на ваш вопрос: вы спросили, как закодировать рабочий прелоадер в JS, и вы его получили. Теперь возьмите этот код и * используйте силу *! –

@CookieGuy Добавил ** EDIT **, чтобы немного помочь вам в следующем вопросе. –

попробовать это

put this script in head section 
<script type="text/javascript"> 
    function preload(arrayOfImages) { 
     for(i = 0 ; i < arrayOfImages.length ; i++) 
     { 
    var img = new Image(); 
      img.src = arrayOfImages[i]; 
     } 
    } 

preload(['img1.png','img2.png']); 
</script>

источник

2013-07-03 05:24:47

Предоставляет ли этот код гарантию главы, я могу загружать изображения всякий раз, когда хочу на холсте, объявленном в теле? – CookieGuy

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

Вы должны убедиться, что эти 5 изображения загружаются (загруженную Doesnt alwaysmean его загружен и готов к использованию, только OnLoad гарантирует, что изображение готово к использованию), прежде чем использовать его.

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

function prefetchImages(sources){ 
     var images = []; 
     var loadedImages = 0; 
     var numImages = sources.length; 
     for (var i=0; i < numImages; i++) { 
      images[i] = new Image(); 
      images[i].onload = function(){ 
       if (++loadedImages >= numImages) { 
        //ready draw with my images now 
        drawThePainting(); 
       } 
      }; 
      images[i].src = sources[i]; //bind onload before setting src bug in some chrome versions 
     } 
    }; 

prefetchImages(["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]); 

function drawThePainting(){ 
     // Basic canvas info 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    // Draw one of the images. Somehow it doesn't work :(
    context.drawImage(imageArray[3], x, y, width, height); 
}

источник

2013-07-03 05:25:28 sabithpocker

Спасибо! Если вы объявляете «var images = []» в функции, не умирает ли этот массив, когда функция закончена? Или я плохо понимаю сферу в JS? – CookieGuy

Кроме того, нужны ли двоеточия конца цикла for и prefetchImages()? – CookieGuy

И извините за несколько комментариев, но imageArray не объявлен в этом коде. Какой массив изображений? – CookieGuy

Предварительная загрузка изображений в Javascript? Без jQuery

ответ

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