html - Delayed loading GIF image from CSS background -

-

this situation; displaying ads on website want display specific banner if visitor using ad blocker. first thing i've looked script detects ad blocker, after trying few different scripts seems of them no longer work (at least, couldn't them work).

so gave on , went different solution. displaying css background image behind ad if ad isn't shown, image is. because typical ad takes moment load made background image gif image 2 seconds of transparency. works charm first time, when reload page or open different page gif animation doesn't play , instantly displays last frame, skipping transparency.

i've tried adding random stuff behind url in css, didn't work. i've tried data/inline version of image, didn't seem work either. i'm kinda running out of solutions.

the css:

.ads { position: relative; top: 15px; float: right; height: 60px; width: 468px; background-image:  url('/images/ads/ads_top.gif?randomstuff=39485') }

i'm looking either;

1) way show alternative image if ad blocked (that still actual , works).

2) way delay css background image being loaded.

3) way prevent gif being cached or forced replay animation on each pageload.

any of these fix problem. hope able help.

thanks!

look this link. simple , don't think need comments. question how set time each image.

time use jquery:

your html code:

<div class='ads'></div> <div class='ads'></div>

and css code:

.ads { position: relative; top: 15px; float: right; height: 60px; width: 468px; }

your jquery code:

$(".ads").each(function() {     var timestamp = $.now();     $(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')"); });

your jquery code have placed .js file. have js files? if yes, add code onload handler. if don't have create new file, say, scripts.js , put code it:

$(document).ready(function() {     $(".ads").each(function() {         var timestamp = $.now();         $(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");     });  }

explanation:

  1. .ready function means instructions in body of function read , started on page load. don't need them work before page loaded, right?
  2. $(".ads") — element selector .ads (with class ads).
  3. $(".ads").each(function() { /* body */ } — .each function means assign instructions function body elements selector .ads
  4. var timestamp = $.now(); — getting timestamp , assigning variable
  5. $(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')"); — adding css property $(this) element (this element current element selector .ads)

thats all. simple. have file scripts.js content above. put somewhere on site, put media files. example, {root}/media/ <-- here.

the last thing should link new js file , jquery library. note, jquery library have linked before file, using $ variable.

add next code <head></head> tag view: 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/media/script.js"></script>

don't forget js actions in onload handler.

hope help. tell me result, please.

jsfiddle


Comments

Post a Comment

Popular posts from this blog

c++ - How to add Crypto++ library to Qt project -

-
Image
i downloaded crypto++ source , compiled cryptlib project in visual studio 2013, , added generated .lib file qt project, made .pro file this: qt += core gui qt += sql greaterthan(qt_major_version, 4):qt += widgets target = untitled template = app sources += main.cpp\ mainwindow.cpp headers += mainwindow.h \ databasecontrol.h \ test.h forms += mainwindow.ui win32:config(release, debug|release): libs += -l$$pwd/ -lcryptlib else:win32:config(debug, debug|release): libs += -l$$pwd/ -lcryptlibd else:unix: libs += -l$$pwd/ -lcryptlib includepath += $$pwd/ dependpath += $$pwd/ win32-g++:config(release, debug|release): pre_targetdeps += $$pwd/libcryptlib.a else:win32-g++:config(debug, debug|release): pre_targetdeps += $$pwd/libcryptlibd.a else:win32:!win32-g++:config(release, debug|release): pre_targetdeps += $$pwd/cryptlib.lib else:win32:!win32-g++:config(debug, debug|release): pre_targetdeps += $$pwd/cryptlibd.lib else:unix: pre_targetdeps += $$pw
Read more

jQuery Mobile app not scrolling in Firefox -

-
i have mobile app built in jquery mobile. scrolling fine in chrome & safari, fails scroll in firefox on desktop. have other instances of same app, different features, , works across browsers. life of me, cannot figure this, please help! located here: http://re-brand.us/dsus/index.html seems bug in firefox: bug log . able scroll using keyboard not trackpad on mac. are using mac? i'll keep looking see if can find way around it.
Read more

How to use vim as editor in Matlab GUI -

-
i using matlab r2013b. using gui, command windows , editor in split screen. in matlab preferences > editor/debugger > editor. there option set custom editor instead of matlab editor. set local editor /usr/bin/vim , not able open files @ anymore. there possibility use vim editor in split screen mode? i aware of !vim file.m , not solution looking for, works satisfactory in -nodisplay mode. rather want keep split screen mode. i did not find solution 100% satisfying, using tmux intermediate solution. allows 2 use split screen 2 terminals. in 1 of can open matlab -nodesktop in terminal mode, , in other 1 vim . possible switch between both split screens. you can use functionality of gui matlab typing things commandhistory , who et cetera.
Read more