जवाबों:
यह ब्राउज़र पर निर्भर होगा, क्योंकि यह है कि वे कैसे युक्ति को लागू करने का निर्णय लेते हैं, हालांकि यहां एक त्वरित परीक्षा में:
नहीं, वे कम से कम फ़ायरफ़ॉक्स, IE8 और क्रोम में डाउनलोड नहीं किए गए हैं।
इसका परीक्षण करने का एक आसान तरीका:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.nonexistent {
background: url('index.php?foo');
}
</style>
</head>
<body>
<?php if(isset($_GET['foo'])) {
file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
</body>
</html>यदि test.txtब्राउज़र के उपयोगकर्ता एजेंट के साथ आबादी है, तो छवि डाउनलोड की जाती है। मेरे किसी भी परीक्षण में ऐसा नहीं था।
एक त्वरित परीक्षण ने इसे साबित कर दिया।
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"><!--
.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}
--></style>
</head><body>
<div class="hassomething"></div>
</body></html>दूसरी छवि, tumblr_kxytwr7YzH1qajh4xo1_500.pngडाउनलोड की गई थी, लेकिन दूसरी नहीं। यह क्रोम (डेवलपर टूल) और फ़ायरफ़ॉक्स (फायरबग) में सही साबित हुआ था।
फ़ायरफ़ॉक्स और क्रोम (उबंटू 9.10) उन कक्षाओं / आईडी के लिए छवियों को डाउनलोड नहीं करते हैं जो डोम में लागू नहीं हैं।
हालांकि यह प्लेटफॉर्म और ब्राउज़र पर निर्भर दोनों हो सकता है।
कभी-कभी, यह वास्तव में निर्भर करता है कि "अप्रयुक्त" का क्या अर्थ है। विभिन्न ब्राउज़र इसे अलग तरह से परिभाषित करते हैं। उदाहरण के लिए, फ़ायरफ़ॉक्स में, <noscript>टैग पर लागू शैलियों को "अप्रयुक्त" माना जाता है और इस प्रकार, किसी भी चित्र को डाउनलोड नहीं किया जाएगा।
क्रोम 26 (संभवतः उन सभी को, यकीन नहीं), करता है अगर वे करने के लिए लागू कर रहे हैं डाउनलोड सीएसएस छवियों<noscript> तत्व पर , तब भी जब जेएस सक्षम होता है। (यह मेरे लिए तुरंत स्पष्ट नहीं है, हालांकि, शायद यह एक बग है?)।
यह नहीं करता है सीएसएस छवियों तत्वों के लिए आवेदन किया डाउनलोड के भीतर<noscript> , तत्व, हालांकि। (यह अपेक्षित व्यवहार है, निश्चित रूप से)।
सीएसएस:
noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }HTML:
<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome. Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>इस स्थिति में, यदि उपयोगकर्ता के पास JS- सक्षम है, तो Chrome में हमेशा। Png और otherbg.png दोनों डाउनलोड किए जाते हैं। यदि उपयोगकर्ता के पास जेएस सक्षम नहीं है, तो केवल Chrome में nojsonly.png डाउनलोड किया जाता है।
मैं गैर-जेएस-सक्षम उपयोगकर्ताओं से ट्रैफ़िक-स्तर को मापने के लिए इस तकनीक का उपयोग करता हूं, क्योंकि Google Analytics हमें यहां विफल करता है। मैं सामान्य <img...>टैग के बजाय पृष्ठभूमि सीएसएस छवि का उपयोग करना पसंद करता हूं , क्योंकि मैं (अप्रयुक्त) सिद्धांत के तहत काम कर रहा हूं, जो बॉट्स को छवि की तुलना में सीएसएस छवि को हड़पने की संभावना कम है <img...>, जिससे मानव-आगंतुकों के लिए अधिक सटीक मायने रखता है।
दिलचस्प है, हालांकि, क्रोम (कम से कम) अप्रयुक्त डाउनलोड करेगा। निम्न उदाहरण में भाषा:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.unused {
background: url(unused.png) no-repeat;
}
.used {
background: url(used.png);
}
</style>
</head>
<body>
<div class="unused used">
hello world
</div>
</body>
</html>