STYLE SWITCHER

Lazy Load Images for Website Performance

Lazy Load Images for Website Performance

Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t even be loaded.

Why Should You Care About Lazy Loading Images?

There are at least a couple of excellent reasons why you should consider lazy loading images for your website:
  • If your website uses JavaScript to display content or provide some kind of functionality to users, loading the DOM quickly becomes critical. It’s common for scripts to wait until the DOM has completely loaded before they start running. On a site with a significant number of images, lazy loading — or loading images asynchronously — could make the difference between users staying or leaving your website.
  • Since most lazy loading solutions work by loading images only if the user has scrolled to the location where images would be visible inside the viewport, those images will never be loaded if users never get to that point. This means considerable savings in bandwidth, for which most users, especially those accessing the web on mobile devices and slow-connections, will be thanking you.
<img data-src="image.jpg" alt="test image">
img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}
JavaScript then adds the src attribute to each img element and gives it the value of their respective data-src attributes. Once images have finished loading, the script removes the data-src attribute from img elements altogether:
[].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});
Website
More
Fix SVG in <img> tags not scaling in IE9, IE10, IE11

Fix SVG in tags not scaling in IE9, IE10, IE11

IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified. View this codepen on the different browsers. Image heights will not scale when the images are inside containers narrower than image widths. This can be resolved in 2 ways.
 
/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src$=".svg"] {
  width: 100%; 
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src$=".svg"] {
    width: 100%; 
  }
}
Website
More
Wordcount.js – Calculate File Newlines, Word and Byte Counts with JavaScript

Wordcount.js – Calculate File Newlines, Word and Byte Counts with JavaScript

WordCount.js is a client-side JS library that counts bytes, words, lines chars, and calculates the longest line of a file. This library utilized the HTML5 File API.
Website
More
FlipClock.js – jQuery Plugin to Add Counter, Timer, Clock with Flip Effect

FlipClock.js – jQuery Plugin to Add Counter, Timer, Clock with Flip Effect

FlipClock.js is a jQuery plugin with CSS3 animations to add counter, timer and clock with smooth flip effect.

Features

  • Use as a clock
  • Use as a timer
  • Use as a countdown
  • Themeable using pure CSS
  • Clean & Dry Syntax
  • Abstract everything into reusable objects
  • Full-Featured Developer API to create custom “Clock Faces”
Website
More
Smart WooCommerce Search

Smart WooCommerce Search

To truly step up the search function of your WordPress site, you should better look into Smart Ajax Product Search plugin. By now you know that you could use something extra to offer your visitors to find exactly what they are after in a more efficient way. Smart Ajax Product Search is a powerful and convenient search plugin for WordPress with a solid stability and compatibility. Speaking of which, it smoothly integrates into the default search function, as well as WooCommerce and even other custom widgets you sport on your site.

Installation

  • Unzip the downloaded .zip file.
  • Upload the plugin folder into the wp-content/plugins/ directory of your WordPress site. Activate the plugin through the ‘Plugins’ screen in WordPress
  • Use the Smart Search screen (/wp-admin/admin.php?page=smart-search) to configure the plugin
Website
More