استخدم بسلاسة صور خلفية كبيرة على صفحات الويب

Question

أرغب في الحصول على صور خلفية ضخمة على موقعي ولكن دون منح المستخدم صعوبة في تنزيلها والموقع يبدو قبيحًا مع تحميل الخلفية.

لن يكون حجمها أكبر من 1920 × 1080 ، ولكن من الصعب أن نقول من حيث الكيلوبايت/ميغابايت.

ما هي خياراتي هنا وأيها الأكثر فعالية؟

أنا لست منزعجًا جدًا من عرض النطاق الترددي ، فقط أريد المستخدم للاعتقاد بأن كل شيء يبدو لطيفًا ؛)

Answer 1

خيار واحد هو استخدام خلفيات متعددة. لديك خلفية صغيرة مثل الطبقة السفلية وتغطيتها بخلفية أكبر.

قد يكون من الصعب أن يكون لديك خلفيتين إذا كنت تريدها على الجسم و تريد دعم أي. قد يكون الحل لبدء خلفية الجسم الأصغر استخدام JS لتغيير الخلفية منخفضة الدقة إلى عالية الدقة بمجرد تحميله:

var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';

---

ضع في اعتبارك أن هذه الخلفية الكبيرة تحتاج إلى رام أكثر من بعض متصفحات الهاتف المحمول (سترفض أجهزة iPhone قبل 3Gs إما فك تشفير هذه الصورة على الإطلاق أو ستبدأ في تطهير محتوى ذاكرة التخزين المؤقت/علامة التبويب في حالة من الذعر).

يمكن إجراء المشكلة الأخيرة مع استفسارات CSS Media:

http://lofotenmoose.info/css/destroy/media-queries-background stretch/

باستثناء الاستعلام max-device-width بدلا من (افتراضي/تكبير) max-width.