PreloadJS
PreloadJS makes preloading assets & getting aggregate progress events easier in JavaScript. It uses XHR2 when available, and falls back to tag-based loading when not.
I did some research and apparently the function that gets called for preloading elements from the queue is fired twice (once from the cache). (I've already checked and each element is added to the queue only once.)
However, this results in two video elements being created, as I'm added them to my document in my function that handles files from the queue. (Basically, I'm creating a bunch of videos with height 0px, which I'm planning to show one by one later on. However, I end up with duplicates of each video.)
var onPreloadFile = function(event) {
var item = event.item; // A reference to the item that was passed in to the LoadQueue
var type = item.type;
if (type == 'video') {
var video = document.createElement('video');
video.src = item.src;
video.setAttribute('class', item.css_class + ' vidStim');
video.setAttribute('style', 'height: 0px');
document.body.children.videoContainer.appendChild(video);
}
}
How can I go about fixing this problem so that I don't have duplicates? (Note -- there is the possibility I want the same video to show up again later on, so I can't only append children that I haven't appended before.)
UPDATE: This fixes my problem, but I don't know if it's bad practice.
var alreadyInstalled = []; //array for vids I put in the document
var onPreloadFile = function(event) {
var item = event.item; // A reference to the item that was passed in to the LoadQueue
var type = item.type;
if (type == 'video') {
var video = document.createElement('video');
video.src = item.src;
video.setAttribute('class', item.css_class + ' vidStim');
video.setAttribute('style', 'height: 0px');
if (alreadyInstalled.length > 0){
//checking previous vid to see if it was the same one. this works because i'm assuming the two duplicate firing happen one after the other. is this always the case?
if (alreadyInstalled[alreadyInstalled.length-1] != video.src) {
alreadyInstalled.push(video.src);
document.body.children.videoContainer.appendChild(video);
}
else {
alreadyInstalled.push(video.src);
document.body.children.videoContainer.appendChild(video);
}
document.body.children.videoContainer.appendChild(video);
}
}
Source: (StackOverflow)
I am using PreloadJS LoadQueue to load am mp4 video, and then play it through regular video tag. I use the listener:
this._createjsLoadQueue.addEventListener("fileload", this.onVideoLoaded);
Event is triggered correctly. Also fileprogress reports 100%. Still, when I play the video, it still stops for buffering about half way.
Any suggestion?
Thank you
Source: (StackOverflow)
Different images should appear on stage. For this I am trying to create an array and put it in a container but id doesn't work. What am I doing wrong? Thanks
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
var queue = new createjs.LoadQueue(true);
var imagesPic = queue.loadManifest(["image1.png", "image2.png","image3.png","image4.png"]);
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
container = new createjs.Container();
stage.addChild(container);
captureContainers = [];
captureIndex = 0;
for (var i=0; i<50; i++) {
container.addChild(imagesPic);
}
for (i=0; i<100; i++) {
var captureContainer = new createjs.Container();
captureContainer.cache(0,0,w,h);
captureContainers.push(captureContainer);
}
Source: (StackOverflow)
I have a HTML5 composition using createjs and associated libraries (via Flash CC 2014).
However, sometimes images that are loaded in through the manifest fail to display when the composition is loaded. I have tried making multiple requests for the image file in the manifest but alas, to no avail. I have tried switching to sprite sheets but then sometimes the sprite sheet image itself fails to display!
Does anyone know if anything can be done to stop this happening? I am unable to switch to an alternative framework, has to be createjs.
Thanks in advance.
EDIT: I am instantiating the images as follows:
Image loading in the manifest:
{src: "images/gridBG.png", id:"gridBG"},
The image-specific function as exported from Flash (I have changed the namespace):
(window.namespace1.namespace2.lib.gridBG = function() {
this.initialize(img.gridBG);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,992,886);
And when I come to use it:
// Layer 4
this.instance_1 = new window.namespace1.namespace2.lib.gridBG();
this.instance_1.setTransform(-339,151.6);
this.timeline.addTween(cjs.Tween.get(this.instance_1).wait(1));
I should reiterate that this is only an intermittent problem and I am unable to reliably replicate it, it just doesn't work sometimes.
Source: (StackOverflow)
This my first time asking question on StackOverflow. :-)
I have a fairly complex page to be displayed involving 20+ pics, 4+ css, 6+ javascript files to be loaded. Because this page is intended to be displayed on mobile phone, I would love it to be pre-loaded (preferably with progress) so to improve user experience. I was looking at some JS libs such as Preload.js but really wondering how I can combine it with my view.
Here are some of the files:
show.blade.php -
@extends('page')
@section('title')
{{ $page->title }}
@stop
@section('header')
@include('pages._navheader')
{!! $page->header !!}
@stop
@section('content')
@include('pages._nav')
{!! $page->content !!}
@stop
@section('footer')
<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
@include('pages._navfooter')
{!! $page->footer !!}
<!-- WeChat Scripts -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
wx.config(<?php echo $js->config(array('onMenuShareTimeline', 'onMenuShareAppMessage'), true, false) ?>);
</script>
<script type="text/javascript" charset="utf-8">
alert('{{ $url }}');
wx.ready(function () {
var shareData = {
title: '{{ Request::session()->get('nickname')}}recommends：{{ $page->title }}',
desc: '{{ $page->description }}',
link: '{{ $url }}',
imgUrl: '{{ $page->thumbnail_url }}'
};
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline(shareData);
});
wx.error(function (res) {
alert(res.errMsg);
});
</script>
<!-- End WeChat Scripts -->
@stop
$page->header -
<link rel="stylesheet" rel='nofollow' href="/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" rel='nofollow' href="/css/products/style.css">
$page->content - some HTML code for the page (with many graphics)
Also the @inlcude partials contain css/js/html neccessary for navigation menu.
So to load all these files located everywhere seems like a big mess. Is there a way to put them into preload nice and clean? Thank you very much in advance.
Source: (StackOverflow)
I am trying to acomplish to use the spriteSheetLoader and afterwards get the result with queue.getResult.
It works for images, sounds,... just not my spritesheet objects. Anyone has an idea how I can fetch my preloaded spritesheets?
Part of the code atm
preloadManifest = [
{src: "/assets/default.json", id: 'spriteShizzle', type:'spritesheet'},
{src: "/assets/default.png", id: 'thingie'},
];
This gets loaded in, but when I cast
preloadQueue.getResult("spriteShizzle");
this will return "undefined" while
preloadQueue.getResult("thingie");
will return my image.
Any way to load the spritesheet wherever I want (so not with the event of a fileload and a switch case like in the examples of CreateJS)?
Source: (StackOverflow)
I have two object types, Ship, and Enemy. Ship is the prototype of Enemy. All ship objects need to have a sprite in them to show the exhaust when the ship is moving. I am using preloadjs to preload the sprite.
The problem comes when setting the prototype of enemy:
Enemy.prototype = new Ship();
This statement calls the ship constructor, which contains this line of code:
var spritesheet = new createjs.SpriteSheet({
images: [queue.getResult('exhaust2')],
});
The problem is because I am using requirejs to organize my project, all of the classes I am defining are defined before the queue has even started loading images.
How would I make it so I can continue using the prototypal inheritance and requirejs, but also allow this sprite to be preloaded?
Source: (StackOverflow)
I'm using PreloadJS to load images for an animation. The majority of the time it works great, but sometimes a single image (frame) is only loaded 10% of the way in the blob that PreloadJS creates. I am passing an array of files as a manifest into queue.loadManifest(manifestName) Any idea what could be causing this and is there any way to prevent it? Thanks.
Source: (StackOverflow)
I have separate manifest files for each level of my game. So when user is playing on Level #1, files for Level#2 are being preloaded at the same time using LoadQueue (PreloadJS).
I've noticed some strange behaviour. Stage FPS is set to 24. But FPS raises (it can be noticed visually) while its preloading next files. It comes to normal FPS when files are preloaded..
How do I fix it? FPS raises at least 1.5x times.
Source: (StackOverflow)
I have created an external manifest file which contains a list of all assets to preload. Example:
{
"path":"assets/",
"manifest": [
{"id":"background", "src":"images/game-background.jpg"},
{"id":"ui-elements-json", "src":"images/ui-elements.json"}
]
}
ui-elements-json is a sprite sheet created in TexturePacker containing various UI elements. My problem is that the actual image is NOT loaded until I create the spritesheet with:
var ss = new createjs.SpriteSheet(preload.queue.getResult('ui-elements-json'));
Which means that it's not being preloaded. At least I cannot see it being loaded in my developer panel. I can manually add the image to the Manifest file like so:
{"id":"ui-elements", "src":"assets/images/ui-elements.png"}
But it's almost as if the image then gets loaded twice and I begin getting some performance issues. If I add "type":"spritesheet" in my Manifest I can see that the image now preloads which is great, but when I create the Sprite Sheet I get the following error:
"Uncaught TypeError: Cannot read property 'slice' of undefined"
Here is a simplified version of my sprite sheet json. As far as I can see it's formatted correctly.
{
"images": ["assets/images/ui-elements.png"],
"frames": [
[511, 2, 1378, 46],
[797, 755, 133, 128],
[871, 885, 133, 128],
[564, 132, 133, 128]
],
"animations": {
"ui-Infobar":[0],
"ui-autospin-down":[1],
"ui-autospin-hover":[2],
"ui-autospin":[3]
}
}
I just need to make sure that my sprite sheet image is prealoded.
Source: (StackOverflow)
I am trying to preload a set of SVG objects and display them using CreateJS/PreloadJS. So far I was able to display a SVG object without preloading, but as soon as I use the LoadQueue from PreloadJS, I can't get my sample to work.
Does somebody know what I am doing wrong here? Thanks!
http://jsfiddle.net/trudeo/05eqqp49/
Javascript
var imageManifest = [
{ id: "MySvgImage", src: "http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/check.svg" }
];
var stage = new createjs.Stage(document.getElementById('gameCanvas'));
var assetQueue = new createjs.LoadQueue(true);
assetQueue.loadManifest(imageManifest);
assetQueue.on('complete', complete);
function complete(e) {
// DOESN'T WORK
var svgImage = new createjs.Bitmap(assetQueue.getResult('MySvgImage'));
stage.addChild(svgImage);
// WORKS
var svgImage2 = new createjs.Bitmap("http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/circles1.svg");
stage.addChild(svgImage2);
stage.update();
createjs.Ticker.setFPS(40);
createjs.Ticker.addListener(tick);
}
function tick() {
stage.update();
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<canvas id="gameCanvas" width="800" height="800"></canvas>
</body>
</html>
Source: (StackOverflow)
I'm running a web-based experiment in which people have to view 100 2-second-long videos (each around 200kb in size) one after the other. It is very important that there is no lag between videos, and so I am preloading them before the experiment starts using preload.js. The experiment begins when all the videos are loaded 100%.
However, this is problematic for some people, who say that the preload is causing their browsers to crash. I'm guessing this is because of a RAM issue?
What might be a good way to go about resolving this problem? Is loading videos in this fashion bad practice (how much data can I preload safely)?
Source: (StackOverflow)
I was wondering if anyone knows how can I reference PreloadJS from a helper module I have created. My RequireJS configuration looks something like this:
require.config({
baseUrl: 'scripts',
paths: {
preloadjs: '../bower_components/PreloadJS/lib/preloadjs-0.6.0.min'
},
shim: {
'preloadjs': {
exports:"createjs.PreloadJS"
}
}
});
And then, what I would like to do is to reference it from my helper module. Something like this:
define([
'jquery',
'underscore',
'preloadjs'
], function ($, _) {
var HelperModule = {
doSomething: function () {
// call preloadjs
},
};
return HelperModule;
});
Source: (StackOverflow)
I'm using PreloadJS as part of an application that's being built with the CreateJS libraries. PreloadJS is being used to pull in graphics and audio files listed in a manifest. I've setup a progress bar and hooked the preloader's fileprogress and fileload events to update it. I'm getting progress updates as the images load, so I can see the progress bar crawling along, but I never get fileprogress updates for the audio files, just the fileload (file is completely loaded) so the progress bar sits idle and then suddenly jumps to 100%. Since the audio files are by far the largest assets, this creates something of a problem as far as providing meaningful load progress to the user.
I've looked at the documentation for PreloadJS and it indicates that XHR loading is the preferred method because it does provide the progress updates, but that PreloadJS can fall back on things like tag-based (<audio>) loading of audio files.
None of the file loading is local or cross domain, so it would seem to me that PreloadJS ought to be using XHR.
Is there a way to force PreloadJS to use XHR for everything so I can get consistent progress updates or why would I not be getting progress events for these much larger files?
Source: (StackOverflow)