I am using the Galleria slideshow on my site, but I've noticed an error that seems to happen very randomly. Most of the time the slideshow loads correctrly but once in a while I get this error:
Uncaught Error: Fatal error: Theme at javascript/themes/classic/galleria.classic.js
could not load, check theme path.
When I reload the page, it's all back to normal.
This is the code I'm using to load it:
<script>
// Load the classic theme
Galleria.loadTheme('javascript/themes/classic/galleria.classic.js');
</script>
I have searched around but still haven't found a solution that works. My personal idea was to have a script that keeps loading until it succeeds, since on reload the page works.
How would I do this?
1 Try the latest build at gihub: https://github.com/aino/galleria/blob/master/src/galleria.js
2 Try loading the theme using a script tag instead:
<script src="javascript/themes/classic/galleria.classic.js"></script>
I adopted the method pointed out by David, loading the theme using a script tag:
<script src="javascript/themes/classic/galleria.classic.js"></script>
But was eventually getting another error (Fatal error: Theme CSS could not load after 20 sec). I'd also recommend adding the CSS using a link tag:
<link rel="stylesheet" type="text/css" href="galleria/themes/classic/galleria.classic.css" />
I had a similar message today when I tried using Galleria. It happened only in Firefox. What I did to get around it is to add the theme stylesheet link directly in the head. I kept the theme script link in too, after the stylesheet, just in case it was needed. After that, the error message went away and Galleria is working as it should.
Judging from where the error message comes from, and considering the random occurrences, this issue could be from simply hitting the timeout when loading:
Galleria.loadTheme = function( src, options ) {
var loaded = false,
length = _galleries.length,
err = window.setTimeout( function() {
Galleria.raise( "Theme at " + src + " could not load, check theme path.", true );
}, 5000 );
In version 1.2.2, the timeout is just 2 seconds, in the above (1.2.6) the timeout is 5 seconds. So upgrading to the later version, or customizing the timeout is definitely something to try.
Given the random behavior, it feels like a browser bug. More specifically, that the browser looses track of the base URL. I would give the full path from the webroot and see if the error goes away. For example:
Galleria.loadTheme('/gallery/javascript/themes/classic/galleria.classic.js');
If this don't help, try:
try {
Galleria.loadTheme('javascript/themes/classic/galleria.classic.js');
}
catch(e) {
location.reload();
}
But this can go infinitely. I would try to get to the bottom of the error and start with different browsers to rule out a bug in your code.
The Beginners Guide states that the script tag in which you load the theme needs to be after the images in the html source. You have probably added the script tag in the head tag. Example from the guide:
<body>
<div id="galleria">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
</script>
</body>
Related
I am trying to add a script in my website.
The problem is the script doesn't load the first time the page renders after a couple of refreshes it works and the iFrame it's responsible for shows up.
I tried a few different ways but nothing worked
Here is the code:
_app.js
<Script
src="https://boards.greenhouse.io/embed"
onError={(e) => {
console.error('Script failed to load', e)
}}
/>
Notice that onError doesn't show any error either.
I also tried loading it in the component itself like but still doesn't work
useEffect(() => {
console.log("lets go");
<Script src="https://boards.greenhouse.io/embed" />
}, []);
I gave it the strategy attribute and tried all the values it can have but that didn't work either.
The page I was loading the script on was being navigated using
<Link href=""></Link>
I had to replace it with
and it worked, hope it helps.
I embed a GitHub gist on my webpage using the script tag as follows
<script src="https://gist.github.com/uname/id.js"></script>
Is there a way to provide alt text in case the gist doesn't load? I tried the alt attribute within the script tag but that doesn't seem to work.
Looking at how gist's are embedded they use document.write.
And then inside there it will create some markup, so what we could do is check to see if the markup has been created after waiting a while, if no gist has been loaded then they won't be any markup with a class of .gist.
Below is a working example.
if you run the snippet it should fail after 5 seconds and show a message, if you then replace 4577639.js_bad with just 4577639.js it will then hopefully work and failed to load message should not appear.
ps. Not sure if this is the official way of falling back, but it seems to work ok.
setTimeout(function () {
if (!document.querySelector(".gist")) {
document.querySelector("#failed-to-load").
style.display = "block";
}
}, 5000);
<div id="failed-to-load" style="display:none">
Failed to load Gist
</div>
<script src="https://gist.github.com/claudemamo/4577639.js_bad"></script>
How do I take the code from codepen, and use it locally in my text-editor?
http://codepen.io/mfields/pen/BhILt
I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.
<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css" src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>
I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.
I have also included the jquery library as I understand a lot of the codepen creations use it.
The only console error I'm getting is
Uncaught TypeError: Cannot read property 'getContext' of null
which is linking to my js file, line 4
(function(){
var canvas = document.getElementById( 'animation' ),
c = canvas.getContext( '2d' ),
Sorry if this is dumb, but I'm new to all this.
I'm sure this is basic as hell. Any help would be awesome!
Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.
Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.
It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;
$( document ).ready(function() {
// js goes in here.
});
either u can try this....
function init() {
// Run your javascript code here
}
document.addEventListener("DOMContentLoaded", init, false);
looks like you are calling the JS before the DOM is loaded.
try wrapping it in a
$(function() {
// your code here
});
which is the same as
$(document).ready(function() {
// your code here
});
if you are using jQuery.
or you could include the <script> tag after the content, just before the closing body tag, this will ensure the content has been rendered before the JS is executed
Or you could name the function in your JS and execute it onLoad of the body:
<body onLoad="yourFunction();">
To download the computed html of a codepen, go to the codepen of your choice,
then click the "Change View" button and go to the "full page" mode.
Now depends on your browser.
Firefox
display the source code (Cmd+u) and go at the very bottom.
Look for the last iframe and click on the value of the src attribute.
There you go.
Chrome
Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option.
There you go.
I'm a creating a loading screen for website I am making. The website loads many images, scripts, etc. The HTML and CSS part is great, but I need a way to guarantee that the "loading..." image will be loaded before anything else.
I'm using jQuery, and everything is initiated within $(function () { ... });. I imagine that the code for this would need to be called before/outside that block, and the code to remove the loading screen will be called at the very end of that block. Currently, the loading image is set as a DIV background, which is the way I prefer it. However, if it's completely necessary, I will settle for an IMG tag.
Update: (solution)
I was able to answer my own question by using a combination of Robin and Vlad's responses. Both were very good, and excellent answers, however the problem is that they were aimed to load an image before another image, rather than load an image before anything else. (CSS, JS, etc...)
Here's the dirty version of what I came up with:
var files = [new Image(), document.createElement('link'), document.createElement('script')];
files[0].setAttribute('src', 'images/loading.gif');
files[1].setAttribute('rel', 'stylesheet');
files[1].setAttribute('type', 'text/css');
files[1].setAttribute('href', 'test.css');
files[2].setAttribute('type', 'text/javascript');
files[2].setAttribute('src', 'js/jquery-1.5.1.min.js');
window.onload = function (e) {
document.getElementsByTagName('head')[0].appendChild(files[1]);
document.getElementsByTagName('head')[0].appendChild(files[2]);
}
Taking a look at the load sequence on the network tab of Chrome's developer console shows that 'loading.gif' is loaded first, then 4 dummy images, then 'test.css', and then 'jquery.1.5.1.min.js'. The CSS and JS files don't begin to load, until they've been inserted into the head tag. This is exactly what I want.
I'm predicting that I may begin to have some problems, however, when I begin to load a list of files. Chrome reports that sometimes the JS file is loaded first, but the majority of the time the CSS file is loaded first. This isn't a problem, except when I begin to add files to load, I will need to ensure that jQuery is loaded before a script file that uses jQuery.
If anyone has a solution for this, or a way to detect when the CSS/JS files are finished loading, using this method, then please comment. Though, I'm not sure that it's going to be a problem yet. I may need to ask a new question in the future about this, if I start to run into problems.
Thank you to every who has helped with this issue.
Update: (glitch fix)
I ended up running into a lot of problem with this method, because the script files were being loaded asynchronously. If I would clear the browser cache, and then load the page, it would finish loading my jquery dependent files first. Then if I refreshed the page, it would work, because jquery was loaded from cache. I solved this by setting up an array of files to load, then putting the load script into a function. Then I would step through each array item using this code:
element.onload = function() {
++i; _step();
}
element.onreadystatechange = function() {
if (("loaded" === element.readyState || "complete" === element.readyState)) { ++i; _step(); }
}
You can reuse resource prealoding browser support.
I'm not sure it works across all browsers but in my case this approach helps me to load images first. Also it allows to define concrete images so UI specific could be skipped
First define in header what resource you want to preload and define resource priority
<link rel="preload" href="link-to-image" as="image">
or
<link rel="preload" href="link-to-image">
Second line allow to increase loading priority across all object types (scripts / images / styles). First line - only through images.
Then define in body link to image as usual:
<img src="link-to-image" alt="">
Here is my working example
https://jsfiddle.net/vadimb/05scfL58/
As long as the "loading..." image is positioned before any other html elements, it should load first. This of course depends on the size of the image. You could put the loading div right after the tag and position it using 'position:absolute'.
Regarding the code to remove the loading screen, one method is to do the following.
Put all the images, scripts that need to be loaded in a hidden div (display: none)
Set up a variable that will hold the total of the images / scripts to be loaded
Set up a counter variable
Attach to each image / script the "onload" event
Everytime the "onload" event is triggered it will call a function that will increment the counter variable and check if the value of the counter equals the value of the total variable
If all resources have been loaded, fire a custom event that will show the div with the images, and hide the div with the loading screen.
The code below isn't tested so it might not work. Hope it helps
var totalImages = 0;
var loadCounter = 0;
function incrementLoadCounter() {
loadCounter++;
if(loadCounter === totalImages) {
$(document).trigger('everythingLoaded');
}
}
function hideLoadingScreen() {
$('#loadingScreen').hide();
$('#divWithImages').show();
}
$(document).ready(function(e) {
$('#loadingScreen').bind('everythingLoaded', function(e) {
hideLoadingScreen();
});
var imagesToLoad = $('img.toLoad');
totalImages = imagesToLoad.length;
$.each(imagesToLoad, function(i, item) {
$(item).load(function(e) {
incrementLoadCounter();
})
});
})
I'm not sure if it's possible to enforce.
If it is, try adding this in the head-tag:
<script type="text/javascript">
if(document.images)
(new Image()).src="http://www.image.com/example.png";
</script>
In theory that may load and cache that image before anything else.
I think if you place the IMG tag at the top of your html body it will be loaded first. If you do not want to move your div just use a copy of the image tag. Once the images is loaded it will be shown in every image tag which shows the same picture.
Or you could use spin.js as loading image. It display this "loading cycle image" via javascript.
Check it out under:
http://fgnass.github.com/spin.js/
My javascript won't load because of errors it receives, only in IE. I used debugger to get the following errors. This page renders the javascript correctly in Safari, FF and chrome but not in IE and only on specific pages like this.
http://tsqja.deznp.servertrust.com/Lakeside_721_2_Shelf_Heavy_Duty_Utility_Cart_p/lak-721.htm
1) No relay set (used as window.postMessage targetOrigin), cannot send cross-domain message
2) Invalid argument. jquery.min.js
Any ideas what the first error implies? I have switched out my jQuery build with the latest and it still does the same thing.
UPDATE I have updated my jquery.min.js to the latest and it I figured out this is where the page stops loading...after the invalid argument pops up in the jquery-latest.min.js, line 16 character 15511 which is the following letter 'b':
finally{b=[e,f],c=0}}return this}
DEMO https://so.lucafilosofi.com/javascript-errors-no-relay-set-only-in-ie-7-8/
1) - No relay set (used as window.postMessage targetOrigin), cannot send cross-domain message
is caused by the <g:plusone /> button on your site: ( google is busy of this notice )
the only way i found to circumnvent this issue is by doing something like this:
$(function() {
setTimeout(function() {
gapi.plusone.render("plusone-div");
},
1500);
});
2) - Invalid argument. jquery.min.js
looking into your source-code is a chaos! ;-) OMG
you have lot's of errors like ( missing http:// protocol specified ):
different folder case-name like /v/newsite/ and /v/Newsite/ this really matter if you are under nix but since you are using ASP...
code like this AttachEvent(window, 'load', store_init); while using jquery like jQuery(document).ready(function() {
multiple inclusion of the same file ( this file is included 3 times ) /a/j/product_details.js
massive use of $(function(){ & $(document).ready(function(){ & $(window).load(function(){ multiple times when just one needed;
js global's all around the page, at the top, in the middle and at the bottom, they should stay all on top IMHO...
different version of jquery loaded at same time like: jquery-1.4.4.min.js & jquery-1.6.2.js & 1.4.2/jquery.min.js together
minor but always crappy, you have <meta /> , <link /> and <script /> in mixed order just like a chicken salad, where they should stay in order meta, links and script preferably at the end of the page.
missing semi-colon ; all around;
non-sense/malformed code like below and much much more...
if (!/\/shoppingcart\.asp/i.test(window.location.pathname)) {
jQuery(document).ready(function() {
jQuery('a').each(AddCartLink)
});
}
var global_Config_EnableDisplayOptionProducts = 'False';
var global_ImageSeed = 'test.jpg';
global_ImageSeed = global_ImageSeed.substring(...
your site with no errors: https://so.lucafilosofi.com/javascript-errors-no-relay-set-only-in-ie-7-8/
what i have done is:
reordered main tags meta,links,script
removed shitty widgets like addthis, google, facebook
"tried" to place all the globals to the top;
commented the part of the code that cause chrome problems in the TopScriptsTEST5.js this file is your main problem, ( you should see an huge chunk of code commented )
removed duplicate file inclusion,
removed latest version of jquery, cause i strongly doubt that all the rest of your code work with the latest jquery version, so use the 1-4-4 instead
some other fix here and there... nothing special
hope this check-up help a little, but i think you need an exorcist ;-)