يتلاشى في صورة خلفية

StackOverflow https://stackoverflow.com/questions/977090

  •  13-09-2019
  •  | 
  •  

سؤال

لدي صفحة ويب تستخدم صورة كبيرة لخلفيتها. كنت آمل استخدام jQuery لتحميل الصورة بمجرد تنزيلها (في الأساس طريقة تحميل Bing.com صورة خلفيةها). هل هذا ممكن مع jquery؟ إذا كان الأمر كذلك، هل هناك مكون إضافي يوصي به؟

هل كانت مفيدة؟

المحلول

هذه مقالة - سلعة ربما يكون مفيدا. النسخ من هناك:

لغة البرمجة

<div id="loader" class="loading"></div>

CSS.

DIV#loader {
  border: 1px solid #ccc;
  width: 500px;
  height: 500px;
}

/** 
 * While we're having the loading class set.
 * Removig it, will remove the loading message
 */
DIV#loader.loading {
  background: url(images/spinner.gif) no-repeat center center;
}

جافا سكريبت

// when the DOM is ready
$(function () {
  var img = new Image();

  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      $(this).hide();

      // with the holding div #loader, apply:
      $('#loader')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);

      // fade our image in to create a nice effect
      $(this).fadeIn();
    })

    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })

    // *finally*, set the src attribute of the new image to our image
    .attr('src', 'images/headshot.jpg');
});

نصائح أخرى

يمكنك أولا تحميل الصورة، ثم، عندما تنتهي من التحميل، قم بتعيينه كصورة خلفية. بهذه الطريقة سوف يقوم المتصفح (نأمل) بتحميل صورة الخلفية من ذاكرة التخزين المؤقت بدلا من إعادة تحميلها. كما طلبت ذلك كمؤدي:

 $.fn.smartBackgroundImage = function(url){
  var t = this;
  //create an img so the browser will download the image:
  $('<img />')
    .attr('src', url)
    .load(function(){ //attach onload to set background-image
       t.each(function(){ 
          $(this).css('backgroundImage', 'url('+url+')' );
       });
    });
   return this;
 }

استخدامه مثل هذا: 

 $('body').smartBackgroundImage('http://example.com/image.png');

لا يمكنك استخدام الصور الخلفية CSS، لأنه من المستحيل إرفاق حدث تحميل الصور (بقدر ما أعرف).

لذلك سأعطيه تسديدة، لكنها لم تختبرها:

لغة البرمجة:

<body>
<div class="bgimage"><img src="/bgimage.jpg" ></div>
<div>
  ... content ...
</div>
</body>

CSS:

.bgimage { position: absolute: }

جافا سكريبت:

$(function() {
   $(".bgimage")
      .css("opacity",0);
      .load(function() { $(this).fadeIn(); });
});

يمكنك الذهاب مع الخدعة التالية، آسف إذا كانت القذرة قليلا.

النصي :

        jQuery.preloadImages = function() {
        for (var i = 0; i < arguments.length; i++) {
            jQuery("<img>").attr("src", arguments[i]);
            $('.box1').attr('preloadURL', arguments[0]);
        }
    }

    $.preloadImages("sky.jpg");

    $(document).ready(function() {
        if ($('.box1').attr('preloadURL') == 'sky.jpg') {
            $('.box1').css({ 'background-image': 'url(sky.jpg)' },$('.box1').fadeIn(1000));
        }
    });

وضع علامة على :

<div class="Content">
        <label>Search Bing</label>
        <input type="text" />
        <input type="button" value="search" />
    </div>
<div class="box1"></div>

CSS:

.box1 {background-repeat:no-repeat; width:800px; height:600px; display:none; position:relative;}
    .Content { position:absolute; left:20px; top:20px; z-index:100;}
    .Content label { color:White;}

أتمنى أن يساعدك هذا

عينة صغيرة على: http://xgreen.co.uk/test.htm.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top