The only script in your HEAD.

Related tags

Loaders headjs
Overview

Head JS

###Latest Version: v1.0.3 :: Downloads | Docs | News | Intro

#####Status Build Status

#####Tested with (..amongst others) Selenium Status

###Responsive Design, Feature Detections, and Resource Loading

  • Speed up your apps: Load JS & CSS asyncronously and in parallel, but execute them in order
  • Load one asset if a condition is met, else fallback and load a different one
  • Manage script dependencies, and execute callbacks once they are loaded
  • Cross-browser compatible « pseudo media-queries » let you code against different resolutions & devices
  • Fix quirks in specific browsers by quickly applying dedicated CSS/JS logic
  • Detect various browsers & their versions
  • Check if the client supports a certain Browser, HTML5, or CSS3 feature
  • Automatically generates JS and CSS classes for browsers & features that where detected
  • Automatically generates CSS classes, to know what page or section a user is viewing
  • Know if the user is in landscape or portrait mode
  • Or whether the client is using a mobile or desktop device
  • Get old browsers to support HTML5 elements like nav, sidebar, header, footer, ...
  • ...
  • Make it, The only script in your <HEAD>
    • A concise solution to universal problems

###Resources

Comments
  • Question: Does HeadJS still have active dev or has it stopped ?

    Question: Does HeadJS still have active dev or has it stopped ?

    Hi Guys,

    I am looking at integrating either HeadJS or RequireJS [ https://github.com/jrburke/requirejs ] ?

    Little confused as RequireJS seems to have a lot of active development going on ?

    So just wondering whether development for HeadJS has "slowed / stopped" and better to move to RequireJS ?

    opened by andyscott12 34
  • In IE8 & IE9 callbacks are executed before assets are loaded, then again once loaded

    In IE8 & IE9 callbacks are executed before assets are loaded, then again once loaded

    I'm having trouble with my ready callbacks being called before assets have been loaded in IE, using HeadJS 0.99. This occurs even in basic usage, such as the following example.

    <!DOCTYPE html>
    <html>
    <head>
        <script type="text/javascript" src="head.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            head.ready(function() {
                $("#main").text('hello');
            });
    
            head.js('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
        </script>
    
        <div id="main"></div>
    </body>
    </html>
    

    This works OK in Chrome where the 1st version of api.load is used. In IE however, the 2nd implementation using the text/cache hack is used, and does not work.

    I have seen the warning that "If caching is not configured correctly on the server, then items could load twice", but I have used HttpWatch to verify IE is caching the assets, and it is.

    When api.load is called in IE, it is entering the (!isHeadReady) block, scheduling itself to be called again later, and returning without calling getAsset(). As a result, the assets array remains unpopulated.

    api.load = function () {
        var args = arguments,
            rest = [].slice.call(args, 1),
            next = rest[0];
    
        // wait for a while. immediate execution causes some browsers to ignore caching
        if (!isHeadReady) {
            queue.push(function () {
                api.load.apply(null, args);
            });
    
            return api;
        }
    

    Next, domReady() is called via domContentLoaded(), and the built-in DOM ready callback is executed. In this callback, the call to allLoaded() returns true because there are no non-loaded assets (because the assets array has not been populated), and so the user callbacks are executed before the assets have been loaded. Is it expected that domReady() can be called before the rescheduled call to api.load() in this way?

    // perform this when DOM is ready
    api.ready(doc, function () {
    
        if (allLoaded()) {
            each(handlers.ALL, function (callback) {
                one(callback);
            });
        }
    

    Eventually the rescheduled call to api.load() executes, and the assets are loaded. After this, the user callbacks are executed a second time.

    Any input much appreciated - thanks a lot.

    Bug Load 
    opened by jezstephens 29
  • IE8 Throwing HTML Parsing Error: Unable to modify the parent container element before the child element is closed

    IE8 Throwing HTML Parsing Error: Unable to modify the parent container element before the child element is closed

    http://i.imgur.com/WrVLA.png

    I should note that this was seen in IETester - which is all I have access to at the moment.

    I'd be happy to provide a URL to anyone that has a true IE8 instance available for testing.

    Bug Load 
    opened by ethagnawl 20
  • FF 3, head.ready and jQuery event handler

    FF 3, head.ready and jQuery event handler

    There is a strange problem with registering an event handler.

    <html>
        <head>
            <title>TEST</title>
            <script type='text/javascript' src='/static/head.js'></script>
        </head>
    
        <body>
            <script type="text/javascript">head.js({'jquery': 'static/jquery-1.5.min.js'})</script>
    
            <script type="text/javascript">
                function bar() {
                     $('#test_div').click(function() {
                             alert(1);
                     });
                }
    
                head.ready('jquery', function() {
                        bar();
                });
                alert(2);
            </script>
    
            <div id="test_div">HELLO!</div>
            <a href="javascript:bar();">Click</a>
        </body>
    </html>
    

    (where head.js is 0.8 or the latest dev from git)

    In Chrome (or IE9):
    I load the page — get “2” message; click the div — get “1” message; click the link and then the div again — get two “1” messages. That is expected.

    In FF 3.6.13:
    I load the page — get “2” message; click the divnothing happens; click the link and then the div again — get single “1” message.

    So click event handler seems to be attached successfully in head.ready but… don't know what's going on.

    opened by kirelagin 20
  • head.ready() doesn't fire in FF

    head.ready() doesn't fire in FF

    I'm experiencing an issue where head.ready doesn't fire in FF, it does in chrome and IE. I've tried debugging, but my js-skills are not good enough yet to figure it out. However, I have discovered by console.logging "handlers" on head, that there is a difference between what it contains. In FF it contains and array with one function which is empty, where as in Chrome the function has an attribute (done = true).

    I will gladly provide you with more information if only you tell me what you need.

    Here's where I put the console.log: (function(doc) {
    var head = doc.documentElement, ie = navigator.userAgent.toLowerCase().indexOf("msie") != -1, ready = false, // is HEAD "ready" queue = [], // if not -> defer execution handlers = {}, // user functions waiting for events scripts = {}, // loadable scripts in different states

         isAsync = doc.createElement("script").async === true ||
                    "MozAppearance" in doc.documentElement.style ||
                    window.opera;        
    console.log(handlers);
        /* rest of the code */
    

    }

    In "head" I've put head.js(files); and somewhere in "body" I used head.ready()- which doesn't fire. I tried using the callback function from head.js and that works fine.

    opened by rochadk 19
  • Recent chromium builds breaking head.js

    Recent chromium builds breaking head.js

    I don't know what exact build number of Chromium began behaving this way, but they refuse to load more than one .js file in the head.js function. Specific example below. I know the bug may lie within Chromium rather than head.js, but wanted to bring this to your attention in case.

    # Works fine in Chromium (build currently 76043, v11.0.684.0) 
    # Works fine in Chrome latest release (v9.0.597.102)
    head.js(
        {JQ: "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"},
        function() {
            alert('success!');
        }
    )
    
    # DOES NOT WORK in Chromium (build currently 76043, v11.0.684.0) 
    # Works fine in Chrome latest release (v9.0.597.102)
    head.js(
        {JQ: "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"},
        {JQ_UI: "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"},
        function() {
            alert('success!');
        }
    )
    

    Thanks for such an excellent, elegant script to manage the mayhem!

    opened by sinejoe 18
  • fix: head.ready not triggered because of wrong asset.state for css

    fix: head.ready not triggered because of wrong asset.state for css

    Some browsers (e.g. Safari) don't fire the onload event for loaded css, so the asset.state will never updated to LOADED. If allLoaded() is called the css assets are in state = LOADING. This PR adds a workaround for this issue without using the img hack (#240)

    opened by xhaggi 17
  • IE10 on my laptop reporting as mobile

    IE10 on my laptop reporting as mobile

    Hi,

    Here's my user agent on my IE 10 on my XPS 13 Ultrabook. It's currently getting the mobile, no-desktop class.

    Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; Touch; MDDCJS)

    My firefox 24.0, chrome are reporting as desktop.

    Maybe coz it has "touch" in the useragent?

    opened by dodozhang21 17
  • head.load, if the last item is ready (state=4) and a previous item is not, the callback is never called.

    head.load, if the last item is ready (state=4) and a previous item is not, the callback is never called.

    An example is here. See console messages. Tested in Chrome 29.

    http://jsfiddle.net/HsJwC/

    Lines 48-60 of source below (load.js). On line 53, the callback is passed for loading the last asset. If it is already loaded, the callback wrapper is called immediately. If all items are not loaded, the callback wrapper does not call the actual callback. As far as I can tell, there is nothing in the loading of the other assets which would cause them to see they are the last script to be loaded and call the callback.

    Since the one(callback) will only be executed once AND the callback wrapper checks that all are loaded, would it hurt to pass the callback as the 2nd parameter in the load call (line 53) on every iteration?

    each(args, function (item, i) {
      if (item !== callback) {
        item             = getAsset(item);
        items[item.name] = item;
    
        load(item, callback && i === args.length - 2 ? function () {
          if (allLoaded(items)) {
             one(callback);
          }
    
        } : null);
      }
    });
    
    opened by johnhoven 17
  • New head.js website?

    New head.js website?

    Is the "new" website a practical joke?

    http://headjs.com/2013/05/20/Migrating-to-Jekyll.html

    A blurry distorted logo? Comic Sans and Courier New? Green on black text boxes? Red lines? Gradients, graphics, logos, and social icons mindlessly strewn about?

    What is going on?

    Feature Request Question 
    opened by soundslocke 17
  • [FIXED] Page-based loading

    [FIXED] Page-based loading

    There are a lot of JS loaders, really. But none of them, at least within documentation, addresses a problem I'm eager to solve. That is to use single <script> line per whole project which inits page-based loading of dependencies.

    Let's create a simple project with index, portfolio, and contacts pages.

    Microframework will help us with routing:

    $app->get('/portfolio/',
        function () use ($app) {
            $prices = array(
                  "price_mine"  => "90",
                  "price_rival" => "120"
            );
            $app->render('portfolio.twig', $prices);
        })->name('portfolio');
    

    Template engine will help us with rendering:

    {% extends "base.twig" %}
    {% block content %}
         <p>Aren't you sick and tired to pay {{price_rival}}…</p>.
    {% endblock content %}
    

    And the missing part in every page is <script src="/static/init.js"></script> that works as follows

    • all pages load jQuery from CDN or from my server as fallback,
    • index loads SoundManager to serve audio salutation,
    • portfolio loads Lightbox to serve images,
    • contacts loads Forms validator.

    What's the best way to achieve it? And how to do that with HeadJS whether it's possible?

    Thank you in advance. Warm regards from Russia, Alexander.

    opened by sergeevabc 16
  • docs: Fix simple typo, existant -> existent

    docs: Fix simple typo, existant -> existent

    There is a small typo in dist/0.98/head.js, dist/0.98/head.load.js, dist/0.99/head.js, dist/0.99/head.load.js, dist/1.0.0/head.js, dist/1.0.0/head.load.js, src/0.98/load.js, src/0.99/load.js, src/1.0.0/load.js, src/2.0.0/load.js.

    Should read existent rather than existant.

    opened by timgates42 0
  • Fallback to local file

    Fallback to local file

    Is there a way to load a URL and, if it fails to load, try a locally stored version instead?

    And, if so, what is the correct way of queuing up scripts that depend on this?

    Currently I'm doing:

       head.load('https://code.jquery.com/jquery-3.2.1.slim.min.js', function(){
          if(typeof jQuery === 'undefined'){
             head.load('/assets/scripts/libraries/jquery/jquery-3.2.1.slim.min.js');
          };
          head.load('/assets/scripts/libraries/jquery/jquery-plugins.js');
          head.load('/assets/scripts/main.js');
       });
       head.load('unrelated-to-jquery.js');
    

    Thanks

    opened by Convincible 0
  • Feature request: add support for newer 'integrity' and 'crossorigin' attributes

    Feature request: add support for newer 'integrity' and 'crossorigin' attributes

    Long time user of HeadJS here. Keep up the good work!

    Would be great if the newer "integrity" tags for assets was supported by HeadJS for the usual security reasons.

    Browser coverage and good links to the standards are on CanIUse.com

    Thanks!

    opened by doc-hex 4
  • getAsset Bug

    getAsset Bug

    in getAsset function in head.load if (typeof item === "object") { for (var label in item) { if (!!item[label]) { asset = { name: label, url : item[label] }; } } } if you assign some protoype to Object it will check those too but it shouldn't. so i think it the second if clause should check some thing like blow too if (item.hasOwnPropery(label))

    opened by aliemam 0
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 0
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Fully-typed utilities for defining, validating and building your document

zhead Typed utilities for defining, validating and building best-practice document <head>'s. Status: Pre-release Please report any issues ?? Made poss

Harlan Wilton 70 Dec 21, 2022
A document head manager for React

React Helmet This reusable React component will manage all of your changes to the document head. Helmet takes plain HTML tags and outputs plain HTML t

National Football League 16.7k Dec 30, 2022
Interactive digital art with head-coupled perspective effect using Three.js and TensorFlow.js

Interactive digital frame with head-tracking using Three.js & TensorFlow.js Using TensorFlow.js and Three.js, this project is a prototype of an intera

Charlie 61 Dec 12, 2022
React-app - Building volume rendering web app with VTK.js,react & HTML Using datasets provided in vtk examples (head for surface rendering and chest for ray casting)

SBE306 Assignment 4 (VTK) data : Directory containing Head and Ankle datasets Description A 3D medical viewer built with vtk-js Team Team Name : team-

Mustafa Megahed  2 Jul 19, 2022
A simple guide to HTML elements

?? HEAD A simple guide to HTML <head> elements Table of Contents Recommended Minimum Elements Meta Link Icons Social Facebook Open Graph Twitter Card

Josh Buchea 29.5k Jan 1, 2023
Fast and minimal JS server-side writer and client-side manager.

unihead Fast and minimal JS <head> server-side writer and client-side manager. Nearly every SSR framework out there relies on server-side components t

Jonas Galvez 24 Sep 4, 2022
🌈 GitHub following, followers, only-following, only-follower tracker 🌈

github-following-tracker GitHub following, followers, only-following, only-follower tracker ?? Just enter your GitHub name and track your followings!

Youngkwon Kim 10 Jun 15, 2022
This is a little script that shows how to ddos a website. This is for example purposes only. Don't ddos a website without the consent of his owner

Dddos-Script This is a little script to ddos a website. This is for example purposes only. I am not responsable of what you do with it If you like thi

null 13 Dec 17, 2022
Script Template Fivem in Type Script

fivem-ts ?? A Typescript Template for FiveM ?? This is a basic template for creating a FiveM resource using Typescript. It includes webpack config fil

Vinícius Pereira 3 Jun 11, 2021
Script to fetch all NFT owners using moralis API. This script output is a data.txt file containing all owner addresses of a given NFT and their balances.

?? Moralis NFT Snapshot Moralis NFT API will only return 500 itens at a time when its is called. For that reason, a simple logic is needed to fetch al

Phill Menezes 6 Jun 23, 2022
Script to synchronize between a Notion database and Google Calendar both ways. Uses Google App Script.

Yet Another Two Way Notion-Google Calendar Sync Script A script to sync events between Google calendar and a Notion database. Features! Google App Scr

kat 41 Jan 7, 2023
Manage and monitorize your notification using only your terminal :3

Notifications Monitor Monitor your notifications and get a temporary list of the notifications. Dependencies Node.js (to run the program; by default,

Gabriel Guerra 3 Apr 12, 2022
A CSS only tooltip library for your lovely websites.

Hint.css A tooltip library in CSS for your lovely websites Demo • Get started • Who's using this? • Browser support • FAQs • Contributing • License hi

Kushagra Gour 8.3k Jan 2, 2023
Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.

90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th

Tim Holman 2.6k Jan 9, 2023
A Browser extension that not only makes your browsing experience safe but makes it optimized

Sia Sia is a browser extension that not only makes your browsing experience safe but makes it optimized Table of Contents About The Project Built With

Arun Govind M 14 Feb 23, 2022
Very simple threejs boilerplate in VanillaJS to start your projects. There is only a basic scene, a load model method and a simple webpack.

Ektogamat ThreeJS Boilerplate by Anderson Mancini Introduction This is a three.js starter project with only 120 lines. But why create another threejs

Anderson Mancini 524 Jan 3, 2023
Easily create key board shortcuts for your JS functions. Built using JS only with no other dependency. Inspired from MacOS spotlight

floodlightjs Inspired from macOS spotlight, floodlight is simple JS library that will show a search area. How the search is handled is completely on y

Raj Nandan Sharma 6 Aug 12, 2022
BttrLazyLoading is a Jquery plugin that allows your web application to defer image loading until images are scrolled to but not only

BttrLazyLoading.js BttrLazyLoading is a Jquery plugin that allows your web application to defer image loading until images are scrolled to but not onl

Julien Renaux 410 Dec 14, 2022