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
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);
https://www.guest-articles.com/education/1z0-1067-oracle-cloud-infrastructure-2019-cloud-operations-associate-02-12-2020
ReplyDeleteIt is a known fact that we all spend time on our favorite social media platform, Facebook. For some of us, it's our only true source of information while others get their daily news from there. The truth is that no matter how much you really love Facebook and all that it has to offer – using the https://uk.eliteassignmenthelp.com/cheap-assignments site's features can be tiring after a while. That's where Facebook Like GIF Preview comes in.
ReplyDelete