:skull: An ancient tiny JS and CSS loader from the days before everyone had written one. Unmaintained.

Related tags

Loaders lazyload
Overview

LazyLoad

Note: LazyLoad is no longer being maintained. I'm not responding to issues or pull requests, since I don't use this project anymore and don't have time to work on it. Please feel free to fork it if you want to continue development on it.

LazyLoad is a tiny (only 966 bytes minified and gzipped), dependency-free JavaScript utility that makes it super easy to load external JavaScript and CSS files on demand.

Whenever possible, LazyLoad will automatically load resources in parallel while ensuring execution order when you specify an array of URLs to load. In browsers that don't preserve the execution order of asynchronously-loaded scripts, LazyLoad will safely load the scripts sequentially.

Use LazyLoad when you need a small, fast, safe dynamic JS or CSS loader, but don't need the overhead of dependency management or other extra functionality that larger script loaders provide.

Downloads

Usage

Using LazyLoad is simple. Just call the appropriate method -- css() to load CSS, js() to load JavaScript -- and pass in a URL or array of URLs to load. You can also provide a callback function if you'd like to be notified when the resources have finished loading, as well as an argument to pass to the callback and a context in which to execute the callback.

// Load a single JavaScript file and execute a callback when it finishes.
LazyLoad.js('http://example.com/foo.js', function () {
  alert('foo.js has been loaded');
});

// Load multiple JS files and execute a callback when they've all finished.
LazyLoad.js(['foo.js', 'bar.js', 'baz.js'], function () {
  alert('all files have been loaded');
});

// Load a CSS file and pass an argument to the callback function.
LazyLoad.css('foo.css', function (arg) {
  alert(arg);
}, 'foo.css has been loaded');

// Load a CSS file and execute the callback in a different scope.
LazyLoad.css('foo.css', function () {
  alert(this.foo); // displays 'bar'
}, null, {foo: 'bar'});

Supported Browsers

  • Firefox 2+
  • Google Chrome
  • Internet Explorer 6+
  • Opera 9+
  • Safari 3+
  • Mobile Safari
  • Android

Other browsers may work, but haven't been tested. It's a safe bet that anything based on a recent version of Gecko or WebKit will probably work.

Caveats

All browsers support parallel loading of CSS. However, only Firefox and Opera currently support parallel script loading while preserving execution order. To ensure that scripts are always executed in the correct order, LazyLoad will load all scripts sequentially in browsers other than Firefox and Opera. Hopefully other browsers will improve their parallel script loading behavior soon.

License

Copyright (c) 2011 Ryan Grove ([email protected]). All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Fixes Internet Explorer 10 compatibility

    Fixes Internet Explorer 10 compatibility

    IE 10 does not use the onreadystatechange event, it is considered a legacy API and does not fire correctly. IE 10 should simply use the onload event.

    I have implemented simple browser version sniffing to rectify this.

    opened by gordyr 8
  • Binding context/scope

    Binding context/scope

    I'm using prototype js, binding context doesn't work properly. i'm passing this for obj, but it doesn't work. it's much simpler for me to apply context via bind(this) for callback function, don't it?

    needs-info 
    opened by rauanmayemir 6
  • Don't import the same resource multiple times

    Don't import the same resource multiple times

    Hello,

    I'm using the pushstate API to reload just one subtree of the DOM on each request while maintaining the <head> element untouched. Some pages of my site need some extra JS or CSS which I'm going to load also using lazyload. Since the user may visit the same page multiple times, the same resource is being included in the <head> over and over.

    How should I detect if some resource is already present and, if it is, prevent LazyLoad o include the file?

    enhancement 
    opened by guiocavalcanti 5
  • @FIXME Browsers parallel script loading capabilities update

    @FIXME Browsers parallel script loading capabilities update

    As this section is more than 3 years old now, requesting for an update regarding what browsers can nowadays support parallel script loading while preserving execution order. Thanks

    opened by emanwebdev 3
  • Converts lazyload into a component

    Converts lazyload into a component

    • These changes will allow lazyload to be imported into component/component projects or into AMD projects. (Why would you? But if you must, it'll work)

    • I've lifted some of the code whole cloth from jquery's source. It could do with some improvements to the documentation.

    • Usage

      var LL = require('lazyload')
      LL.js(...);
      LL.css(...);
      
    opened by sankargorthi 2
  • jQuery $(document).ready() called before scripts are loaded.

    jQuery $(document).ready() called before scripts are loaded.

    I am testing LazyLoad as a way of delivering multiple UI framework files through two simple js includes. This way, developers don't have to include 20 or more links in their pages and I can update the files without requiring them to update their code.

    The issue I am running into in my tests is that a jQuery document ready call placed at the end of a file can get called before the library files are loaded. This happens almost all the time in my test page.

    Two restrictions: IE9 is the sole browser and adding the document ready call in the LazyLoad callback function is not an option. I can't control how people will design their apps.

    Here is a sample of my page structure. In this example the chosen call fails as

    Object doesn't support property or method 'chosen'

    Please let me know if there is a workaround to this issue.

    Thanks!

    <!DOCTYPE html>
    <html>
        <head>
            <script src="/shared/lazyload/lazyload.js"></script>
            <script src="/js/loader/1.1/scriptloader.js?v=full"></script>
       </head>
       <body>Page Content.... <select id="foo"><option>Hello</option></select>
       <script>
          $(document).ready(function(){
          $("#foo").chosen() // <--this fails
          });
       </script>
    </body>
    </html>
    

    scriptloader.js Looks like this:

    
        cssBase = ["/shared/Bootstrap/2.3.2/noIcon/css/bootstrap.min.css"
                    , "/shared/Bootstrap/2.3.2/noIcon/css/bootstrap-responsive.css"
                    , "/shared/Bootstrap/overrides/2013.7/bootstrap-override.css"
                    , "/shared/Fonts/FontAwesome/3.2.0/css/font-awesome.min.css"
                    , "/shared/Fonts/OpenSans/OpenSans.css"
                    , "/Shared/DataTables/1.9.4/media/css/DT_bootstrap.css"
                    , "/shared/DataTables/1.9.4/extras/ColReorder/media/css/ColReorder.css"
                    , "/shared/DataTables/1.9.4/extras/ColVis/media/css/ColVis.css"
                    , "/shared/DataTables/1.9.4/extras/TableTools/media/css/TableTools.css"
                    , "/shared/Chosen/0.9.15/css/chosen.css"
                    , "/shared/DatePicker/2013.7/css/datepicker.css"
                    , "/shared/TimePicker/2013.7/css/bootstrap-timepicker.min.css"
                    , "/shared/DateRangePicker/2013.7/daterangepicker.css"
                    , "/shared/Slider/2013.7/css/slider.css"
                    , "/shared/css/3.0/Core.css"
                  ]
    
    
        jsBase = ["/shared/jQuery/1.10.1/jquery-1.10.1.min.js"
                    , "/shared/Bootstrap/2.3.2/noIcon/js/bootstrap.min.js"
                    , "/shared/Bootstrap/overrides/2013.7/bootstrap-nb-extend.js"
                    , "/shared/DataTables/1.9.4/media/js/jquery.dataTables.min.js"
                    , "/Shared/DataTables/1.9.4/media/js/DT_bootstrap.js"
                    , "/shared/DataTables/1.9.4/extras/ColReorder/media/js/ColReorder.min.js"
                    , "/shared/DataTables/1.9.4/extras/ColVis/media/js/ColVis.min.js"
                    , "/shared/DataTables/1.9.4/extras/FixedColumns/media/js/FixedColumns.min.js"
                    , "/shared/DataTables/1.9.4/extras/FixedHeader/js/FixedHeader.min.js"
                    , "/shared/DataTables/1.9.4/extras/TableTools/media/js/TableTools.min.js"
                    , "/shared/DataTables/1.9.4/extras/TableTools/media/js/ZeroClipboard.js"
                    , "/shared/DatePicker/2013.7/js/bootstrap-datepicker.js"
                    , "/shared/TimePicker/2013.7/js/bootstrap-timepicker.min.js"
                    , "/shared/Moment/2.0.0/moment.min.js"
                    , "/shared/DateRangePicker/2013.7/daterangepicker.js"
                    , "/shared/Chosen/0.9.15/js/chosen.jquery.min.js"
                    , "/shared/BootBox/3.2.0/bootbox.min.js"
                    , "/shared/Slider/2013.7/js/bootstrap-slider.js"
                 ]
    
    
        LazyLoad.css(cssBase);
        LazyLoad.js(jsBase);
    
    
    opened by Itumac 2
  • Two Lazyload.css instances return undefined in the last array item (pendingUrls)

    Two Lazyload.css instances return undefined in the last array item (pendingUrls)

    Situation: using a Ruby partial that create two javascript modules and print out the js code in document, and this two partials uses the same css, the for logics return undefined href link on last array item (pendingUrls).

    opened by eduardojmatos 2
  • Array of js files not always loading in correct order in FF4

    Array of js files not always loading in correct order in FF4

    I have enjoyed using lazyload.js for a few months but discovered a problem with the release of firefox 4. The javascript files are not always loading in the same order that I specified in the array. The only way to get around this currently is to have do all my initialisation in the final call back function.

    needs-info 
    opened by inspiraller 2
  • Custom attributes for resource tags

    Custom attributes for resource tags

    Hi, Ryan!

    With my patch user can add custom attributes for resource tags by using objects instead of strings.

    // This code will produce link or style tag with media="print":
    LazyLoad.css(['foo.js', 'bar.js', {url: 'baz.js', media: 'print'}]);
    
    opened by korotin 1
  • Fixes multiple CSS load issue

    Fixes multiple CSS load issue

    Hello,

    Here's a patch that fixes the load of multiple CSS files (an array being passed) on WebKit. I noticed the previous code shifted the pending urls array, and as the pendingUrls array had the same reference, the loop IDs got messed which resulted in the second CSS to load to become 'undefined'.

    Cheers!

    opened by valeriansaliou 1
  • IE 10 Compatibility, Take Two

    IE 10 Compatibility, Take Two

    This is an alternative fix for #10—instead of user agent sniffing, it uses the presence of the draggable property (which reflects the draggable attribute) to distinguish IE >= 10 from earlier versions. draggable is a global attribute, so it exists on all HTML elements.

    The weak inference isn't ideal, but is preferable to parsing the version.

    opened by ghost 1
  • fix ie 10 loaded readyState fired prematurely issue.

    fix ie 10 loaded readyState fired prematurely issue.

    Hey, It seems loaded readyState fired prematurely, hope this modification can fix this issue.

    https://connect.microsoft.com/IE/feedback/details/729164/ie10-dynamic-script-element-fires-loaded-readystate-prematurely.

    opened by 2betop 0
  • load js/css , need relativity path like requires

    load js/css , need relativity path like requires

    like requires , lazyload.js/css needn't writer absolute path(or relative to the current page which import the lazyload.js),just writer the path can be relative to the lazyload.js

    opened by hyingreborn 1
  • Custom Attribute on Stylesheet/Script tag

    Custom Attribute on Stylesheet/Script tag

    Since I'm using Prefixfree, LazyLoad tends to affect use of the styles as it adds appropriate vendor prefixes to properties, and to disable it on separate stylesheets, I'd have to add the data-noprefix attribute.

    opened by chrishazfun 0
  • Add noConflict method

    Add noConflict method

    This allows the library to be used in environments where the global namespace should not be polluted such as scripts that are embedded onto third-party websites.

    opened by nathanstitt 0
  • The last script fails to load in IE10 when using back button.

    The last script fails to load in IE10 when using back button.

    I've noticed that when using the browser's back (or forward) button, the last script doesn't load properly. The code is as such:

    <script type="text/javascript" src="Scripts/lazyload.js"></script>
    <script type="text/javascript">
        LazyLoad.js(["Scripts/script1.js", "Scripts/script2.js", "Scripts/script3.js"], function() {
            InitializeApplication(); //Defined in script3.js
        }
    </script>
    

    This code works just fine normally, but when I use the browser's back/forward buttons, the last script in the list doesn't load and InitializeApplication is undefined. My workaround has been to add a dummy element to the end of the script list. The dummy script of course has no content therefore I don't care if it doesn't load properly. This problem occurs in IE10, but not in Firefox. Any thoughts?

    opened by Etsap 0
Owner
Ryan Grove
I like pie.
Ryan Grove
A file and module loader for JavaScript

RequireJS RequireJS loads plain JavaScript files as well as more defined modules. It is optimized for in-browser use, including in a Web Worker, but i

null 12.9k Dec 27, 2022
Asyncronous JavaScript loader and dependency manager

$script.js - Async JavaScript loader & dependency manager $script.js is an asynchronous JavaScript loader and dependency manager with an astonishingly

Dustin Diaz 2.9k Jan 3, 2023
A Module Loader for the Web

A Module Loader for the Web Sea.js is a module loader for the web. It is designed to change the way that you organize JavaScript. With Sea.js, it is p

seajs 8.3k Jan 3, 2023
Dynamic ES module loader

SystemJS SystemJS is a hookable, standards-based module loader. It provides a workflow where code written for production workflows of native ES module

null 12.4k Dec 29, 2022
enterprise standard loader

ESL (Enterprise Standard Loader) ESL是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。 ESL is a browser-only, amd-compliant module loader. In modern web app

Baidu EFE team 833 Dec 16, 2022
CSS optimization using critters for Nuxt

@nuxtjs/critters CSS optimization using critters for Nuxt Features Zero-configuration required Enables CSS Extraction Critical CSS automatically injec

Nuxt Community 76 Dec 26, 2022
⚡️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
Monorepo project that shows the current weather data and weather forecast for next 7 days. Created from scratch to participate in a 14-days hackathon.

Climatic Monorepo project that shows the current weather data and weather forecast for next 7 days. Created from scratch to participate in a 14-days h

Luis Marsiglia 6 Jun 23, 2022
100 Days of Code is a self improvement tool, where you make a commitment to solve 1 coding problem everyday for the next 100 days.

100 Days of Code is a self-improvement tool, where you make a commitment to solve 1 coding problem everyday for the next 100 days. This repository includes a range of tasks, lessons, resources, and challenges on various programming languages to help improve programming skills.

Tarleton Computer Society 7 Dec 14, 2022
⛺️ Tipi is a homeserver for everyone! One command setup, one click installs for your favorites self-hosted apps. ✨

⛺️ Tipi — A personal homeserver for everyone ⚠️ Tipi is still at an early stage of development and issues are to be expected. Feel free to open an iss

Nicolas Meienberger 4.9k Jan 4, 2023
Notifies and then closes draft pull requests that have had no activity for a specified amount of time.

Close Stale Draft Pull Requests This action has been inspired by microsoft/vscode-github-triage-actions, actions/stale and probot/stale, ultimately wr

Multi Theft Auto 2 Jan 7, 2022
This extensions will prompt you to remove any other extensions that we found as being broken and unmaintained.

octarine vscode extension This extensions will prompt you to remove any other extensions that we found as being broken and unmaintained. We do expect

42picky 4 May 27, 2022
UNMAINTAINED Open source JavaScript renderer for Kartograph SVG maps

This project is not maintained anymore. Here are a few reasons why I stopped working on kartograph.js: there's no need to support non-SVG browsers any

null 1.5k Dec 11, 2022
[UNMAINTAINED] Simple feed-forward neural network in JavaScript

This project has reached the end of its development as a simple neural network library. Feel free to browse the code, but please use other JavaScript

Heather 8k Dec 26, 2022
[unmaintained] DalekJS Base framework

DalekJS is not maintained any longer ?? We recommend TestCafé for your automated browser testing needs. dalekjs DalekJS base framework Resources API D

DalekJS 703 Dec 9, 2022
I had cloned the home UI of whatsapp using ReactJS

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

sparsh gupta 19 Jan 2, 2023
Modern browsers already had a vivid player for video

Modern browsers already had a vivid player for video. However, web developers and designers still want to custom their own style player for different situations. Sounds like web component will do a lot favor for this purpose. With <msc-ez-video /> support, customize control panel will become a piece of cake. <msc-ez-video /> adopts CSS custom properties, developers could style them as they want.

Paul 1 Dec 29, 2021
A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email.

Strapi PasswordLess Plugin A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email. A pl

Andrey Kucherenko 51 Dec 12, 2022
A simple HTML list of To Do tasks built using webpack, JS ES6 and CSS. This app allows users to add and delete tasks to organize their days.

To-Do List "To-do list" is an app that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Karla Delgado 15 Sep 26, 2022
Download all Moodle files with one click. This is a Chrome extension built to save time and effort from downloading files manually one by one!

Moodle Downloader Extension Moodle downloader extension for Chrome. The extension is tested with both the TUM moodle and the official moodle demo. Not

Zhongpin Wang 8 Nov 15, 2022