browser Images on android only show after refresh
Question
I'm using Modernizr to detect non-capable SVG browsers and loading an additional stylesheet for those that don't support it. The images are set by background-urls in css.
The images don't show in my android browser at first but when I refresh the page they load. I made certain the cache was cleared before doing so. I'm also using Jquery Mobile but not using any of its styles.
Here is my header:
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>My Website</title>
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta name="viewport" content="width=device-width, target-densityDpi=160, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="<?php bloginfo('template_url'); ?>/css/reset.css" rel="stylesheet" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" />
<script type="text/javascript" src="http://use.typekit.com/abv4xxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mobile.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/modernizer.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.svg,
nope: '<?php bloginfo("template_url"); ?>/css/nono-svg.css'
});
</script>
<?php wp_head(); ?>
</head>
1 answers
solution1
0 ACCPTED 2012-08-23 14:39:58
I found the solution. I had to move my js scripts into the load command of modernizr.
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>My Website</title>
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta name="viewport" content="width=device-width, target-densityDpi=160, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="<?php bloginfo('template_url'); ?>/css/reset.css" rel="stylesheet" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" />
<script type="text/javascript" src="http://use.typekit.com/abv4xxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/modernizer.js"></script>
<script type="text/javascript">
Modernizr.load({
load: ['https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
'<?php bloginfo("template_url"); ?>/js/mobile.js',
'http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js'
],
test: Modernizr.svg,
nope: '<?php bloginfo("template_url"); ?>/css/nono-svg.css'
});
</script>
<?php wp_head(); ?>
</head>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.