Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/29: Рейтинг темы: голосов - 29, средняя оценка - 4.83
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
1

Не выводит картинки через span data-src

30.04.2014, 11:54. Просмотров 5966. Ответов 10
Метки нет (Все метки)


Доброго времени суток) Не хочет выводит картинки через span data-src, не нахожу причину, так как первый раз использую этот метод, может кто подскажет..

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/style.css" media="print">
    <script src="js/picturefill/dist/picturefill.js"></script>
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <title>Document</title>
</head>
<body>   
    <div class="container">
        <div class="row fluid-bg"> 
            <div class="cols col-12 "> 
                <figure class="avatar">
                    <span data-picture data-alt="Привет, я тигр!">
                    <span data-src="/img/raimonda.png"></span>
                    <span data-src="/img/raimonda.png"  data-media="(min-width: 400px)"></span>
                    <span data-src="/img/raimonda@2x2.png"  data-media="(min-width: 800px)"></span>
                    <span data-src="/img/raimonda@2x.png" data-media="(min-width: 1000px)"></span>
 
                    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
                    <noscript>
                        <img src="/img/ss.png" alt="Привет, я тигр!">
                    </noscript>
                </span>
 
                </figure>
 
 
                <h1>Привет, это тигр и кажется он тебя заметил!</h1>  
            </div> 
        </div>
 
        <div class="row"> 
            <div class="cols col-3">Три</div>
            <div class="cols col-7">Семь</div>
            <div class="cols col-2">Два</div> 
        </div>
    </div>
 
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
* {
    margin: 0;
    padding: 0; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
 
body {
    font: 100%/1.5em Arial,Helvetica, sans-serif;
    color: #000;
}
 
 
/* flexible media */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}
 
img {
    max-width: 100%;
    height: auto;
}
 
.avatar {
    border-radius: 50%;
    float:left;
    overflow: hidden;
    border: 2px solid #000;
}
 
 
  
 
figure {
    position: relative;
}
 
figure img,
figure video, 
figure object,
figure embed {
    display: block;
    max-width: 100%;
} 
 
 
.fluid-bg {
    max-width: 100%;
    color:#fd4; 
    height: 550px;
    padding: 10% 0;
    line-height: 2em
}
 
 
 
@media screen and (min-width: 45em) {
    .fluid-bg {  
        ackground: #d2d2d2 url('/img/xl.png') no-repeat top center; 
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
 
    }
}
 
 
@media screen and (max-width: 45em) { 
    .fluid-bg {  
        ackground: #d2d2d2 url('/img/s.png') no-repeat top center;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;        
    }
}
 
 
/* Fluid Grid */
.container {
    width: 90%;
    margin: 0 auto;
    background: #d2d2d2;
}
  
 
.container .cols {
    float: left;
    margin: 0 0 1em;
    padding: 0 1em; 
    text-align: center;
} 
 
 
.container .cols.col-1   { width: 8.333333333333332%;  }
.container .cols.col-2   { width: 16.666666667%;  }
.container .cols.col-3   { width: 25%; }
.container .cols.col-4   { width: 33.333333333%;    }
.container .cols.col-5   { width: 41.666666667%; }
.container .cols.col-6   { width: 50%;  }
.container .cols.col-7   { width: 58.333333333%; }
.container .cols.col-8   { width: 66.666666667%;    }
.container .cols.col-9   { width: 75%; }
.container .cols.col-10  { width: 83.333333333%;  }
.container .cols.col-11  { width: 91,666666667%; }
.container .cols.col-12  { width: 100%;    } 
 
.container:before,
.container:after,
.row:after,
.row:before,
.clear:before,
.clear:after {
    content: " ";
    display: table;
}
 
.container:after,
.row:after,
.clear:after {
    clear: both;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
30.04.2014, 11:54
Ответы с готовыми решениями:

data-src заменить
у меня есть строка &lt;div class=&quot;minibutton&quot;&gt;&lt;div&gt; &lt;a href=&quot;#&quot; rel=&quot;101_0013&quot;...

Замена src картинки
Доброго времени суток уважаемые гуру))) Прошу помочь с такой задачей &lt;div name=&quot;imagename&quot;&gt;...

Изменение src картинки
Что я делаю не так? Не могу изменить картинку. &lt;script...

Как убрать кеширование картинки image1.src?
Моя фотокамера генерирует каждые 5 секунд изображение. Обновляется только один растровый файл. ...

10
327 / 217 / 97
Регистрация: 04.11.2012
Сообщений: 638
30.04.2014, 12:01 2
Цитата Сообщение от sendxt Посмотреть сообщение
data-src
Эта штука нужна только для хранения инфы в тегах, чтобы например не плодить глобальные переменные.
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
30.04.2014, 12:05  [ТС] 3
Suby, то есть я не правильно их применяю? Просто видео смотрел по этой теме именно такой пример был, и всё работало чётко
0
327 / 217 / 97
Регистрация: 04.11.2012
Сообщений: 638
30.04.2014, 12:08 4
Я не знаю что за видео, но там наверно джаваскриптом извлекалась инфа из тегов спан, потом генерировался контент(например имг) и в его срц записывалась эта инфа.
Киньте ссыль на видео, гляну че там, может мне полезно будет)

Добавлено через 1 минуту
Цитата Сообщение от sendxt Посмотреть сообщение
именно такой пример был, и всё работало чётко
В любом случае, просто на голом хтмл работать не будет
0
SF
Boo
142 / 117 / 55
Регистрация: 02.12.2013
Сообщений: 396
30.04.2014, 13:06 5
sendxt, ?
HTML5
1
<img data-src="image.jpg" src="" alt="" />
0
417 / 379 / 163
Регистрация: 03.01.2013
Сообщений: 966
30.04.2014, 14:12 6
Цитата Сообщение от sendxt Посмотреть сообщение
Не хочет выводит картинки через span data-src
Я библиотека picturefill.js точно подключена? Так как обработкой data-src и data-media занимается именно она.
0
327 / 217 / 97
Регистрация: 04.11.2012
Сообщений: 638
30.04.2014, 14:34 7
Цитата Сообщение от sendxt Посмотреть сообщение
<script src="js/picturefill/dist/picturefill.js"></script>
Ааа, вон тут чего, понятно тогда, проглядел я этот момент)
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
30.04.2014, 14:42  [ТС] 8
Suby, http://loftblog.ru/2014/04/22/... kie-media/

Добавлено через 3 минуты
isco_kg, не так тоже не работает.

picturefill.js подключен точно)
0
Миниатюры
Не выводит картинки через span data-src  
417 / 379 / 163
Регистрация: 03.01.2013
Сообщений: 966
30.04.2014, 15:03 9
Нужно проверить пути до картинок.
Вместо "/img/raimonda.png" напишите "img/raimonda.png"

Второй вариант. Библиотека, вероятно, сменила принцип действия. На сайте http://scottjehl.github.io/picturefill/#examples показаны примеры, имитирующие возможный будущий стандарт (polyfill) адаптивных изображений. В них другой способ использования библиотеки.
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
30.04.2014, 16:19  [ТС] 10
monochromer, какой лично вы используете способ ? смены картинок в зависимости от ширины экрана
0
417 / 379 / 163
Регистрация: 03.01.2013
Сообщений: 966
30.04.2014, 17:28 11
Цитата Сообщение от sendxt Посмотреть сообщение
какой лично вы используете способ
Меняю JavaScript'ом атрибут src y img или style="background-image: url(img.jpg)"
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
30.04.2014, 17:28

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Передача переменной,содержащей путь в src картинки
Это функция предварительного просмотра и вывода его на стр через table function preview() { ...

Центрирование span по вертикали поверх картинки
Добрый день! Есть такая задачка, не могу отцентрировать по вертикали блок span. CSS .example2...

Узнать ширину и высотку картинки в ImageView, которая загружена в android:src
В ImageView загружена картинка. Нужно узнать ширину. Сколько не пытаюсь у меня выводит ширину...

Можно в src передавать параметр, например, src='1.asp?par=3'?
Можно в src передавать параметр, например, src='1.asp?par=3'?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.