Lazy Loaded CSS sample is wrong

alonsoitokawa

alonsoitokawa

Member
#1
#1
I had a problem where I was using the sample code provided by OLS plugin in wordpress, where the transition effect wasn't working. I even asked for help here and the developer said it was working. Ok, the php code was working, but not the css transition, I told him about the css, he couldn't reply about that issue (and that's fine).
Few minutes ago I found-out that somehow the class in the frontend is different from the sample provided by the plugin, the sample code class is
Code: 
loaded
, but the actual class that should be used is
Code: 
litespeed-loaded
, so I edited the code and also added more code to improve browser compatibility:

Code: 
/* Lazy Load do plugin Litespeed */
/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* Netscape */
  -moz-opacity: 0;
  /* Safari 1.x */
  -khtml-opacity: 0;
  /* Good browsers */
  opacity: 0;}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
    -webkit-transition: opacity 0.5s linear 0.2s;
    -moz-transition: opacity 0.5s linear 0.2s;
    transition: opacity 0.5s linear 0.2s;
      /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* IE 5-7 */
  filter: alpha(opacity=1);
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;
  /* Good browsers */
    opacity: 1;
}
 
You must log in or register to reply here.
Top