图片预加载
http://www.w3school.com.cn/jsref/dom_obj_image.asp
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1--http://www.bokicabo.com/en/04/</title> <style> *{padding: 0; margin: 0;} html,body{ height: 100%; margin: auto;} .parentBox{ width: 100%; height: 100%; position: relative; text-align: center; overflow: hidden; border:0px solid red;} .box1{ background: #f5f2ed;} .box2{ background: #dfb00d;} .box3{ background: #8d9d1c;} .box4{ background: #b42642;} .box5{ background: #26b0d4;} .box6{ background: #c76d18;} .box7{ background: #424041;} .parentBox img.pic{ position: absolute; height: 100%; width: auto !important;} </style> <script src="../jquery.js" type="text/javascript"></script> <script> window.onload = function(){ var aImg = document.getElementsByTagName("img"); loadImg(aImg); } // 图片预加载 function loadImg(obj){ for(var i = 0; i< obj.length; i++){ if(obj[i].complete){ // 图片加载成功 checkSize(obj[i]); }else{ setTimeout(function(){loadImg();},100); } } } // 设置图片位置 function checkSize(obj){ var l = -obj.width / 2 + "px"; obj.style.marginLeft = l; // console.log(l); } $(function(){ $(window).on("resize",function(){ $(".parentBox .pic").each(function(i,eme){ var l = Math.floor($(eme).outerWidth() / 2); $(eme).css("marginLeft",-l + "px"); }); }); }); </script> </head> <body> <div class="parentBox box1"> <img src="../images/1-en.jpg" class="pic"> </div> <div class="parentBox box2"> <img src="../images/2-en.jpg" class="pic"> </div> <div class="parentBox box3"> <img src="../images/3-en.jpg" class="pic"> </div> <div class="parentBox box4"> <img src="../images/4-en.jpg" class="pic"> </div> <div class="parentBox box5"> <img src="../images/5-en.jpg" class="pic"> </div> <div class="parentBox box6"> <img src="../images/6-en.jpg" class="pic"> </div> <div class="parentBox box7"> <img src="../images/7-en.jpg" class="pic"> </div> </body> </html>