I have an animated 404 Error page created using JQuery.
The only to make it work with my AngularJS project is if i had the jquery.min.js, 404.js, 404.min.css and a javascript script tag in the index.html however, this creates unnecessary loading on my other pages and slows down the website.
I found this https://github.com/manuelmazzuola/angular-ui-router-styles but it looks like it's designed only for CSS stylesheets or can i use to include JS files too?
How should I load this JS, CSS files only on my partials, 404.html file and not on index.html?
I think you looking for lazy loading.
Normally, all the JavaScript that pertains to a certain web page or application is loaded immediately during page load.
Lazy loading is loading code only once the user needs it. So if you have a button on your page that will show a completely different screen to the user once it is pressed,
Require Js Serve this purpose well and clean.
Take a look at below code from my project
$('#somebutton').on('click', function() {
require(
['every', 'javascript', 'dependency', 'for', 'other', 'screen'],
function(ev, js, dep, fr, othr, scrn){
// Create the screen with your dependencies
}
);
});
Related
I'm new to JS development, basically from PHP Background. I was wondering if there is a way of including html pages like we do in codeigniter(loading views). Im trying to create a template structure to my electron application where header and footer file is loaded on every html page requested.
I cant try the jQuery load method
$('#footer').load('header.html');
as I would need to load jquery in footer of every file html file I create.
I tried the JS way of loading html files
document.getElementById("head").innerHTML='<object type="text/html" data="header.html" ></object>';
but that basically creates an object which is similar to an iframe so your resources never gets used to the way you would load using link and script tags.
I have a main.js file from where the home page would be loaded:
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 1280, height: 742, resizable:false})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'app/views/index.html'),
protocol: 'file:',
slashes: true
}));
}
How do i attach the header and footer directly in this method? Also I'm using express if that helps.
Please see this plunker for an angular 1.5 example, or check the documentation. Basically you want to do this <div ng-include="'yourtemplate.html'"></div> for the angular setup.
For EJS templates, you would do something like <% include includes/header.ejs %>
I would wrap those in the bootstrap navbar-header class and footer tags for optimal placement, or any custom div that you are working on.
Now, when it comes to using these in Electron, I would incorporate these files into your 'main' browserWindow, so that when the application runs, the index.html file you are referencing always has these files loaded.
Another thing you can do is use ng-if statements to change the ng-includes based on certain parameters. The same can be said with any server side template like EJS.
Question
How to get rid of the components' JS and CSS code which are not used by the application and are loaded on every page in components.js and components.css?
Problem
Primefaces loads on every page two big JS files (components.js and jquery-plugins.js, ~140KB) and for every component it loads additional JS and CSS file.
Loading the lightweight page with one basic component results in several JS and CSS requests which noticeably slows down the DOM loading. The JS and CSS code of components which is not used in the page (or even in whole application) is loaded on every page.
What I tried:
- I tried the OmniFaces CombinedResourcesHandler. I finished up with 200KB JS file but the download time and JS processing time took about 30% of DOM loading. Combined resources are loaded from /javax.faces.resource/ and I did not find out how to load them from CDN as those resources are generated automaticaly.
If found this Stack Overflow page that shows you how to add a Javascript include to an ASP.NET/MVC (Razor) view, so that it ends up in the HEAD section of the web page:
Add CSS or JavaScript files to layout head from views or partial views
It works great. But I'm wondering if there is a way to do it in a way that takes advantage of bundling? I found this SO post that says it isn't possible and to use something called Cassette, but it's from 2012 so I'm wondering if there's a way to do it now native to ASP.NET/MVC/Razor:
MVC Bundles: How to add assets in views and have them render combined with the main layout page bundle
I found this SO post that talks about adding new bundles dynamically but it appears to add them only to the BODY section, not the HEAD:
MVC Bundles: How to add assets in views and have them render combined with the main layout page bundle
Your comment has helped me understand what you want to do now. As far as rendering out bundles from a view, it works the same way the answer to your first question.
First, make a bundle for those file(s) that you want.
BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/mySpecialBundle").Include(
"~/Scripts/notOftenUsedScript.js",
"~/Scripts/someOtherScript.js"));
Next, in your layout, define a section where you want to be able to render out the JavaScript bundle.
_layout.cshtml
#RenderSection("scripts", required: false)
Now, in any view that you want to render the special bundle, reference this section and use the same syntax that you would in the layout page for bundle rendering.
ExampleView.cshtml
#section scripts{
<!---Test section rendering-->
#Scripts.Render("~/bundles/mySpecialBundle")
}
The #Scripts.Render and #Styles.Render will work from any razor page in your application. Using the section allows us to control where the output from our view page will land in the master page.
With that said, if the JS is truly lightweight, then after the first time your user hits a page with the special bundle, it should be cached by their browser. So, the performance hit from just having this in your layout all the time would probably be minimal the first page hit and non-existent for each page hit afterwards.
I'm using Rails 4. I have a javascript file, app/assets/javascripts/exotic_fonts.js, which adds some javascript functionality to fonts. When I load the homepage this javascript file is automatically loaded on the homepage, however it's not loaded automatically on other pages such as /user/show and the functionality is missing. However if I refresh the page, then the javascript file is loaded and the functionality is back. I was wondering how I can fix it.
Also, is it possible to load only some of the javascript files on a certain page?
Thanks.
You can use following snippet to fix this issue. Now your js code will works with turbolinks.
ready = ->
// Your javascriptcode goes here
$(document).ready(ready)
$(document).on('page:load', ready)
I have a html page (inicio.html) which loads some js scripts. Then from a js script there is a navigation to another page in a different html file (test.html) and a different set of js files.
The problem is that when I do the changePage ($.mobile.changePage("test.html");) and the new page is loaded the new js files are kept in files like
http://localhost:8080/cdmWEB/resources/scripts/jquery/2.0.3/jquery-2.0.3.min.js/eval/seq/2
The js functions are being executed because the console.log messages in them are shown. But the changes the js scripts should do in the page are not rendered and the js cannot be debuged (using firebug).
I am loading the js scripts with the tag in the html file, but I have also tried the $.getScript function with the same result.
I am using jQuery 2.0.3 and jQuery-mobile 1.3.1.
From what I saw the reason why the js files are kept like that is because they are retrieved using ajax. Is there a way to prevent this and retrieve the file "normally"? or is there something I am missing (probably)?
Have a look here:
Jquery Mobile - $.mobile.changepage not loading external .JS files
You should consider loading the needed JS in the main page, and not in the page your changing to.
I ended up using window.open('test.html','_self','',true); to make the transition. This loads the new scripts when the transition is made and the jquery appends keep working fine.