html - Loading image using CSS animation VS loading using GIF image -


i encounter problem showing loading css animation while doing heavy javascript operation, wondering if css animation taking more resources showing simple loading gif image, made following tests.

1 created page loading css

  1. created page loading css animation
  2. created page loading gif image
  3. compared resources using chrome task manager

here results:

it looks css animation using more cpu, , more memory want consult using css animations. isn't heavy? should avoid using in loading cases?

loading example using css animation

loading example using gif image

css loading animation compare gif loading image

here code loading css animation

css

/* beautiful loading screen */ #loadingwrap{   width: 100%;   height: 100%;   top: 0px;   z-index: 250;   background-color: rgba(255, 255, 255, 0.46); } .glyphicon.spin {   font-size: 36px;   -webkit-animation: spin 1.822s infinite linear;   -moz-animation: spin 1.822s infinite linear;   -o-animation: spin 1.822s infinite linear;   animation: spin 1.822s infinite linear;   -webkit-transform-origin: 50% 58%;   transform-origin:50% 58%;   -ms-transform-origin:50% 58%; /* ie 9 */   line-height: 0px; }  @-moz-keyframes spin {   {    -moz-transform: rotate(0deg);  }   {    -moz-transform: rotate(360deg);  } }  @-webkit-keyframes spin {   {-webkit-transform: rotate(0deg);}   {-webkit-transform: rotate(360deg);} } @keyframes spin {   { transform: rotate(0deg); }   {transform: rotate(360deg); } } #loadingicon {   z-index: 10;   position: absolute;   right: 20px;   bottom: 20px;   line-height: 0px; }

html

<div id="loadingwrap">    <div id="loadingicon">       <i class="glyphicon glyphicon glyphicon-cog spin">q</i>    </div> </div>

here code loading using simple gif image

css

#loadingwrap{       width: 100%;       height: 100%;       top: 0px;       z-index: 250;       background-color: rgba(255, 255, 255, 0.46);  }  #loadingicon {       z-index: 10;       position: absolute;       right: 20px;       bottom: 20px;       line-height: 0px;       background: url(../1-0.gif) no-repeat center center;       width: 20px;       height: 20px;  }

html

<div id="loadingwrap">    <div id="loadingicon">    </div> </div>

gif images:

  • positives

    • performance (small file size)
    • ease of use & setup
    • older browser support

  • negatives:

    • don't scale smoothly (retina displays, larger images)
    • image quality(256 color limit)
    • difficult adaptation & change (need specialized software photoshop)

css animations:

  • positives:

    • easily editable through css
    • high quality images , rich colors possible
    • smooth scaling (retina ready images & svgs)

  • negatives:

    • performance
    • css animations not supported ie 7,8,9
    • more complex setup

-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more