UPDATED

Javascript & Jquery plugins for loading images for website

Browse some of the best javascript plugins for your website. Some of the top plugins taken from unheap collection for loading images


0 contributions

51 Views 0
 
 Tags    #tech(12)   #javascript(1)   #jquery(1)   #list(4)   #toplist(4)   #top-lists(49)  

Javascript, Jquery plugins for images for your website

How it works

If an element overlaps any of the images, either .background--dark or .background--light is added to it. BackgroundCheck does not change an element's style — you must do so using CSS.


Original Style

.label {
color: blue;
}

Additional Styles

.label.background--light {
color: black;
}
.label.background--dark {
  color: white;
}

How to use

BackgroundCheck.init({
targets: '.ui'
});
Check all elements with a .ui class against all images on the page.
BackgroundCheck.init({
targets: '.ui',
images: '.thumbnail'
});

Check all elements with a .ui class against all images with a .thumbnail class.

// All targets
BackgroundCheck.refresh();
// Specific target
BackgroundCheck.refresh(e.target);
Progressively is a javascript library for loading images progressively. It’s written entirely in JavaScript so it doesn’t depend on 3rd-party libraries like jQuery. It's super small, < 1.2kB when minified & gzipped!


It will load images on when user browse to the page, saving bandwidth & server requests.

Source:https://thinker3197.github.io
Progressively - Load Images progressively

A JavaScript library to load images progressively.

Source:https://thinker3197.github.io

How to use progressively loading images with javascript

Installation

npm install progressively

Usage

progressively.init(options);

ADAPTIVE BACKGROUNDS

A jQuery plugin for extracting dominant colors from images and applying it to its parent.

Source:https://briangonzalez.github.io

Usage

bower install --save adaptive.background
<img src="/image.jpg" data-adaptive-background>
$(document).ready(function(){
  $.adaptiveBackground.run();
});

BackgroundCheck

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

Source:http://www.kennethcachia.com
BackgroundCheck

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

Source:http://www.kennethcachia.com

How it works

If an element overlaps any of the images, either .background--dark or .background--light is added to it. BackgroundCheck does not change an element's style — you must do so using CSS.


Original Style

.label {
color: blue;
}

Additional Styles

.label.background--light {
color: black;
}
.label.background--dark {
  color: white;
}

How to use

BackgroundCheck.init({
targets: '.ui'
});
Check all elements with a .ui class against all images on the page.
BackgroundCheck.init({
targets: '.ui',
images: '.thumbnail'
});

Check all elements with a .ui class against all images with a .thumbnail class.

// All targets
BackgroundCheck.refresh();
// Specific target
BackgroundCheck.refresh(e.target);

Lazy Load Images using Jquery

Demo Animations | BttrLazyLoading

BttrLazyLoading is a Jquery plugin that allows your web application to only load images within the viewport. It also allows you to have different version of an image for 4 differents screen sizes.

Source:http://bttrlazyloading.julienrenaux.fr
BttrLazyLoading propose a large choice of CSS animations from Animate.

Source:http://bttrlazyloading.julienrenaux.fr

Please login before Adding Contribution

LOGIN

 


Input Item is required

{{value.error}} Invalid Url Found


{{value.title|truncate:'50':'...'}}

{{value.description|truncate:'70':'...'}}

Source:{{value.url|truncate:'50':'...'}}
{{value.error}} {{value.serror}} Input Item is Required





Source:{{value.cite}}





{{value.error}} Input Item is Required



Instagram Logo
{{value.error}} Input Item is Required



{{value.error}} {{value.serror}} Input Item is Required





{{value.snippet.title}}

{{value.snippet.description|truncate:'20':'...'}} {{value.snippet.channelTitle}}
Views {{value.statistics.viewCount|number}}


Preview will appear here..
No Gifs Found