All Projects → enbifa → jquery.skeleton.loader

enbifa / jquery.skeleton.loader

Licence: other
A jQuery plugin to make screen skeleton loader.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to jquery.skeleton.loader

Jcanvas
A jQuery plugin that makes the HTML5 canvas easy to work with.
Stars: ✭ 612 (+841.54%)
Mutual labels:  jquery-plugin, javascript-library
Ditherjs
A javascript library which dithers an <img> using a fixed palette
Stars: ✭ 76 (+16.92%)
Mutual labels:  jquery-plugin, javascript-library
Ua Parser Js
UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data. Supports browser & node.js environment.
Stars: ✭ 6,421 (+9778.46%)
Mutual labels:  jquery-plugin, javascript-library
Filterizr
✨ Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions ✨
Stars: ✭ 546 (+740%)
Mutual labels:  jquery-plugin, javascript-library
fancy-textfill
Fast implementation for resizing text to fill its container.
Stars: ✭ 17 (-73.85%)
Mutual labels:  jquery-plugin, javascript-library
Trip.js
🚀 Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
Stars: ✭ 789 (+1113.85%)
Mutual labels:  jquery-plugin, javascript-library
Tag Handler
Tag Handler is a jQuery plugin used for managing tag-type metadata.
Stars: ✭ 76 (+16.92%)
Mutual labels:  jquery-plugin, javascript-library
Jquery Mosaic
A jQuery plugin to build responsive mosaics of images or any other content fitted to match heights in multiple rows while maintaining aspect ratios. http://jquery-mosaic.tin.cat
Stars: ✭ 80 (+23.08%)
Mutual labels:  jquery-plugin, javascript-library
Modern.JS
모던 자바스크립트 라이브러리/프레임워크 × KIPFA(한국인터넷전문가협회)
Stars: ✭ 16 (-75.38%)
Mutual labels:  jquery-plugin, javascript-library
Ui Components
Most used UI Components — of web applications. Curated/Most loved components for web development
Stars: ✭ 175 (+169.23%)
Mutual labels:  jquery-plugin, javascript-library
xGallerify
A lightweight, responsive, smart gallery based on jQuery
Stars: ✭ 52 (-20%)
Mutual labels:  jquery-plugin, javascript-library
kolorwheel.js
🌈 Color palette generator JavaScript library
Stars: ✭ 37 (-43.08%)
Mutual labels:  jquery-plugin, javascript-library
busy-load
A flexible loading-mask jQuery-plugin
Stars: ✭ 76 (+16.92%)
Mutual labels:  jquery-plugin, loader-plugin
decoy
jQuery plugin to make decoys for your elements.
Stars: ✭ 53 (-18.46%)
Mutual labels:  jquery-plugin
simple-crypto-js
Simplified AES cryptography for safer and easier encryption and decryption processes of any JavaScript objects.
Stars: ✭ 78 (+20%)
Mutual labels:  javascript-library
biz-ui
jQuery Plugin Collections for Business
Stars: ✭ 24 (-63.08%)
Mutual labels:  jquery-plugin
jqIpLocation
jqIpLocation – jQuery Plugin that returns the location of an IP address in JSON format
Stars: ✭ 18 (-72.31%)
Mutual labels:  jquery-plugin
tabullet
Simple jQuery plugins for creating a table that can insert, edit, and delete row in one place.
Stars: ✭ 13 (-80%)
Mutual labels:  jquery-plugin
jsontree
jQuery plugin for JSON visualization
Stars: ✭ 14 (-78.46%)
Mutual labels:  jquery-plugin
awesome-libraries-resources
Awesome js and css libraries for web development.
Stars: ✭ 32 (-50.77%)
Mutual labels:  javascript-library

jquery.skeleton.loader (lo scheletrone)

A jQuery plugin to make screen skeleton loader.
Attention: skeleton is not a tool to automatically create wireframe ... at least not yet :)




In 2013, Luke Wroblewski first discussed the drawbacks of using loading spinners in on-screen experiences, and spoke in favour of what he called “skeleton screens.” The concept behind skeleton screens is the use of empty pages that are progressively populated with content as it becomes available — immutable regions of a page are rendered instantly on load, appearing as neutral color blocks, and are gradually replaced with content such as images, headings, and interface labels. (from this very good article)

The goal of "lo scheletrone" is to help those who want to include skeleton screens on their site, existing or new.

Contents

Browser Support

We do care about it.

IE Chrome Firefox Opera Safari
IE 8+ Latest Latest Latest Latest

Getting started

See jquery.skeleton.loader plugin in action DEMO or here in in this pen CODEPEN:

Two quick start options are available:

Installation

Include the script (unless you are packaging scripts somehow else):

<link href="/path/to/jquery.skeleton.css" rel="stylesheet">
<script src="/path/to/jquery.scheletrone.js"></script>

Do not include the script directly from GitHub (http://raw.github.com/...). The file is being served as text/plain and as such being blocked in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.

Usage

skeleton gif

The easiest way to use the plugin is to create a structure of element like this

<div id="myDIV">
        <div class="mySpan" >
          <h2>Title 1</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
</div>

Lo scheletrone makes the skeleton of all the elements that have no childrens. If you want to create a simple skeleton of your DOM elements:

var instance = $('#myDIV').scheletrone();

Lo scheletrone is ready to make for you the ajax call and replace the template:

var instance = $('#myDIV').scheletrone({
  url   : "path/to/url.html",
  ajaxData  : { idp: 1, id: 2 }   //if you have to pass data on querystring, otherwise omit it
});

Magic happens when you do not have the template on your home page. Lo scheletrone can make the call for you, recover the div and save it to local storage. Subsequently, the template will be retrieved from the local storage and maked like a skeleton before making the ajax call. To do this, however, you must enter the data-attributes on the div that you want to save in cache:

<div id="myDIV">
        <div class="mySpan" data-scheletrone="true">
          <h2>Title 1</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
        <div class="mySpan" >
          <h2>Title 2</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
</div>

and you have to set the options incache: true:

var instance = $('#myDIV').scheletrone({
  url   : "path/to/url.html",
  ajaxData  : { idp: 1, id: 2 }   //if you have to pass data on querystring, otherwise omit it
  incache: true
});

It is possible to instantiate several times the plugin DEMO:

<div id="myDIV">

            <img class="avatar" src="http://picsum.photos/id/237/255/200/">
            <div class="content">
                <h1 class="firstName">
                    <span>UP</span>
                </h1>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.
                </div>
            </div>
        
</div>

<div id="myDIVcached">
        <div class="mySpan" data-scheletrone="true">
          <h2>Title 1</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
        <div class="mySpan" >
          <h2>Title 2</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
</div>
var instance = $('#myDIV').scheletrone({
  url   : "path/to/url.html"
});

var instancecached = $('#myDIVcached').scheletrone({
  url   : "path/to/url.html",
  incache: true
});

to stop the loader use the public method stopLoader in this way:

var instance = $('#myDIV').scheletrone('stopLoader');

Options

Currently this plugin supports the following options:

url

  • Default: ``
  • Acceptable-Values: String
  • Function: The website address of the site that the plugin will call asynchronously

ajaxData

  • Default: {}
  • Acceptable-Values: Json Object
  • Function: Data to send to the ajax call

debug.log

  • Default: false
  • Acceptable-Values: Boolean
  • Function: If you want to debug the plugin

debug.latency

  • Default: 0
  • Acceptable-Values: Integer
  • Function: The timeout that the plugin will have before injecting the data returned from the ajax call (in milliseconds)

removeIframe

  • Default: ''
  • Acceptable-Values: Boolean
  • Function: Exclude the iframes of the page to be scanned (to avoid security issues)

selector

  • Default: false
  • Acceptable-Values: String
  • Function: If you want to retrieve only a specific content from a loaded page use this option with a selector expression. Please refer (https://api.jquery.com/filter/).

backgroundImage

  • Default: true
  • Acceptable-Values: Boolean
  • Function: To make a skeleton also the elements that contain background images

replaceImageWith

  • Default: ''
  • Acceptable-Values: String
  • Function: To apply a css class to the images maked skeleton, typically to apply a placeholder. In the attached css file a class, named ".bg-image" is already available where you can add the placeholder in a base64 format

incache

  • Default: false
  • Acceptable-Values: Boolean
  • Function: To cache the received asynchronous data

onComplete

  • Default: null
  • Acceptable-Values: Javascript Function
  • Function: If you want a callback when the skeleton is complete

maskText

  • Default: true
  • Acceptable-Values: Boolean
  • Function: If you need to mask an element's text, especially when incache is true

skelParentText

  • Default: false
  • Acceptable-Values: Boolean
  • Function: By default the main element of all text type nodes (nodetype = 3) is sketched (with background = #ccc). If you want to avoid it, and in some cases it is necessary, just make the valure to false.

Example with options:

var instance = $('#myDIV').scheletrone({
            url         : 'http://url/to/file',
            ajaxData    : {},
            debug        : {
                log: false,
                latency: 2000
            },
            removeIframe: true,
            maskText: true,
            skelParentText: false,
            backgroundImage: true,
            replaceImageWith: 'bg-image',
            selector: '#containerSingle',
            incache : false,
            onComplete     : function() {
                console.log('default onComplete() event');
            }
});

When using lo scheletrone

There are several cases where it is useful to use this plugin. The first is when you have a div populated asynchronous and the data waiting is very slow. The effect you have is an empty block awaiting the data like this.

skeleton gif

in this case you can use this code:

var instance = $('#myDIV').scheletrone({
                    incache: true,
                    onComplete: function() {
                        //here you can insert the code to populate the div
                        
                    }
            });

The important thing to do is to include an attribute "data-scheletrone" on the items to be cached like this:

<div class="container2" data-scheletrone="true">
    <img class="avatar" src="http://picsum.photos/id/237/255/200/">
    <div class="content">
        <h1 class="firstName">
            <span>Up</span>
        </h1>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.
        </div>
    </div>
</div>

If you are creating a new page and want to give the skeleton screen effects, you have just create the template on the page and leave the work dirty to the Scheletrone.

<div class="container" id="myDIV">
    <img class="avatar" src="http://picsum.photos/id/237/255/200/">
    <div class="content">
        <h1 class="firstName">
            <span>Up</span>
        </h1>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.
        </div>
    </div>
</div>

and

var instance = $('#myDIV').scheletrone({
            url         : 'http://url/to/file',
            ajaxData    : {},
});

if you want to manipulate the data received via ajax or simply make the call use the onComplete callback function.

var instance = $('#myDIV').scheletrone({
                    incache: true,
                    onComplete: function() {
                        //here you can insert the code to populate the div
                        
                    }
            });

if you want to retrieve only a specific content from the loaded page you can pass the selector on the options.

var instance = $('#skeletone3').scheletrone({
                    url   : "index3.html",
                    incache: true,
                    selector: '#containerSingle'
            });
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].