js如何判断css设置的背景图片是否成功加载

background-imagecssjs图片

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    div
    { 
    width: 500px;
    height: 500px;
    background-image: url(0.png);
    background-color: #000000;
    }
    </style></head>
    <body>
    <div id="div"></div>
    <script type="text/javascript">
    window.onload = function(){

    var img=new Image();
    img.src='0.png';
    console.log(img)
    if(img.width==0){
    alert('图片加载失败')
    }else{
    alert('图片加载成功')
    }
    }
    </script>
    </body>
    </html>
      

  2.   

    页面中的同一张图片会被请求一次，然后记录在缓存中，再次获取的话是从缓存中得到按照加载先后顺序，比较简单的理解方式，是等图片加载完毕，再去设置虽然网上有很多说可以 通过加载另一张图片 监听事件的方式来判断，但是个人认为并不尽然，可能要考虑加载顺序的问题，毕竟 window.onload是等页面加载完毕才会执行的方法，而此时背景图片已然开始请求了，所谓的监听 可能显得不太靠谱了所以，我觉得处理方式应该是，先去加载图片，被页面缓存下来之后，再去设置相应的背景你可能考虑如下的实现方式$('<img/>').attr('src', 'http://picture.de/image.png').load(function() {
       $(this).remove(); // prevent memory leaks as @benweet suggested
       $('body').css('background-image', 'url(http://picture.de/image.png)');
    });
      

  3.   

    不能判断。资源的加载跟javascript没关系。2楼方法看起来不错。如果0.png，没加载上。
     var img=new Image();
     img.src='0.png';
    alert('图片加载失败')
    但这里又重新加载了0.png。
    所以，通过你这判断之后，说不准图片会出来的。