{"id":308,"date":"2005-11-29T22:53:22","date_gmt":"2005-11-29T14:53:22","guid":{"rendered":"http:\/\/j178.mtgbb.com\/12"},"modified":"2005-11-29T22:53:22","modified_gmt":"2005-11-29T14:53:22","slug":"%e8%a3%bd%e4%bd%9c%e8%bc%89%e5%85%a5%e5%9c%96%e7%89%87%e7%9a%84%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/j178.mtgbb.com\/?p=308","title":{"rendered":"\u88fd\u4f5c\u8f09\u5165\u5716\u7247\u7684\u6548\u679c"},"content":{"rendered":"<p>\u4e0d\u4f7f\u7528 Flash \uff0c\u88fd\u4f5c\u8f09\u5165\u5716\u7247\u7684\u6548\u679c<\/p>\n<p>\u8cc7\u6599\u4f86\u6e90\uff1a<a href=\"http:\/\/clagnut.com\/sandbox\/imagefades\/\" target=\"_blank\">Onload image fades without Flash<\/a><\/p>\n<p>The code :<\/p>\n<p><!--more--><br \/>\nThe photo is a straightforward image in a div.<br \/>\nEach has an id:<\/p>\n<pre language=\"html\" line=\"1\">\n<div id=\"'photoholder'\">\n  <img decoding=\"async\" id=\"'thephoto'\" alt=\"'Photo'\" src=\"'\/images\/ithaka.jpg'\"\/>\n<\/div>\n<\/pre>\n<p>The &#8216;loading\u2026&#8217; image is set as the background to the photoholder div, and the photoholder is sized to match the photo.<\/p>\n<pre language=\"css\" line=\"1\">\n#photoholder {\n  width:450px;\n  height:338px;\n  background:#fff url('\/images\/loading.gif') 50% 50% no-repeat;\n}\n\n#thephoto {\n  width:450px;\n  height:338px;\n}\n<\/pre>\n<p>To prevent a cached photo from displaying before it has been faded  in, when need to make the photo hidden. JavaScript is used to write a  style rule so that users without JavaScript enabled will not have the  photo permanently hidden:<\/p>\n<pre language=\"javascript\" line=\"1\">\ndocument.write(\"<style type=\"'text\/css'\">\n#thephoto {visibility:hidden;} <\/style>\");\n<\/pre>\n<p>Note that document.write does not work when XHTML is properly sent as  application\/xhtml+xml. You will either have to use HTML or serve your  document as text\/html.<\/p>\n<p>Once everything on the page has loaded (crucially this includes  images), an onload event is triggered, calling our initImage function:<\/p>\n<pre language=\"javascript\" line=\"1\">\nwindow.onload = function() {initImage()}\n<\/pre>\n<p>The initImage function makes the photo completely tranpsarent by  using the setOpacity function to set its opacity to zero. The photo can  then be made visible and faded in using the fadeIn function:<\/p>\n<pre language=\"javascript\" line=\"1\">\nfunction initImage() {\n  imageId = 'thephoto';\n  image = document.getElementById(imageId);\n  setOpacity(image, 0);\n  image.style.visibility = 'visible';\n  fadeIn(imageId,0);\n}\n<\/pre>\n<p>The setOpacity function is passed an object and an opacity value. It  then sets the opacity of the supplied object using four proprietary  ways. It also prevents a flicker in Firefox caused when opacity is set  to 100%, by setting the value to 99.999% instead.<\/p>\n<pre language=\"javascript\" line=\"1\">\nfunction setOpacity(obj, opacity) {\n  opacity = (opacity == 100)?99.999:opacity;\n\/\/ IE\/Win\nobj.style.filter = \"alpha(opacity:\"+opacity+\")\";\n\n\/\/ Safari&lt;1.2, Konqueror\nobj.style.KHTMLOpacity = opacity\/100;\n\n\/\/ Older Mozilla and Firefox\nobj.style.MozOpacity = opacity\/100;\n\n\/\/ Safari 1.2, newer Firefox and Mozilla, CSS3\nobj.style.opacity = opacity\/100;\n}\n<\/pre>\n<p>The fadeIn function uses a Timeout to call itself every 100ms with an  object Id and an opacity. The opacity is specified as a percentage and  increased 10% at a time. The loop stops once the opacity reaches 100%:<\/p>\n<pre language=\"javascript\" line=\"1\">\nfunction fadeIn(objId,opacity) {\nif (document.getElementById) {\n  obj = document.getElementById(objId);\n  if (opacity < = 100) {\n    setOpacity(obj, opacity);\n    opacity += 10;\n    window.setTimeout(\"fadeIn('\"+objId+\"',\"+opacity+\")\", 100);\n  }\n}\n}\n<\/pre>\n<p>Accessibility<\/p>\n<p>This implementation caters for all combinations of JS and CSS; that is to say the photo can always be seen once it has loaded.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0d\u4f7f\u7528 Flash \uff0c\u88fd\u4f5c\u8f09\u5165\u5716\u7247\u7684\u6548\u679c \u8cc7\u6599\u4f86\u6e90\uff1aOnload image fades without Fl &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[26],"class_list":["post-308","post","type-post","status-publish","format-standard","hentry","category-javascript-vbscript","tag-javascript-2"],"_links":{"self":[{"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=\/wp\/v2\/posts\/308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=308"}],"version-history":[{"count":0,"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=\/wp\/v2\/posts\/308\/revisions"}],"wp:attachment":[{"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}