GIF images consists of many frames, so size of GIF image is more as compared to normal image. Its not recommended to load GIF images first and its better to maintain one normal preview image for every GIF image. You can use first frame of GIF image as preview image. Click here to see my on-line tool for generating first frame of GIF image

How Facebook Handles GIF images

Facebook is not loading GIF images directly. Its converting user uploaded GIF images into simple video format. Find below inspected source code
Here We are not following facebook way of dealing GIF images. We are just loading GIF images
on user's interest

angGifPreview

I have created this angGifPreview AngularJS directive to create Facebook like GIF Preview.  You can find it on github

Implementaion

Add AngularJS

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

Add CSS and JS files

angGifPreview specific CSS and JS files
<link rel="stylesheet" href="angGifPreview/angGifPreview.css" />
<script src="angGifPreview/angGifPreview.js"></script>

HTML Markup

Find below for HTML markup. gif-preview element tag has 2 attributes 
gif : gif image path
preview : gif preview image path
<gif-preview preview="previewImage" gif="gifImage"></gif-preview>

JS CODE

import gifPreview module as like shown in below code
(function(angular) {
    'use strict';
    angular.module('sampleExample', ['gifPreview'])
      .controller('Controller', ['$scope', function($scope) {
          $scope.previewImage = 'sample_first_frame.png';
          $scope.gifImage = 'sample_giphy.gif';
    }]);
})(window.angular);

0 comments:

Blogroll

Follow this blog by Email

Popular Posts