Как установить пользовательский CSS для data-src
Я знаю, что мы можем установить CSS для изображения через идентификатор или его класс. Мои изображения на сайте закодированы, как показано ниже
<img class = "img-responsive" id = "loader" src = "{{asset('img/loader.gif')}}" data-src = "{{asset('uploads/banner01.jpg')}}" >
Атрибуты изображений
загрузчик.gif
Width:200px Height:200pxбаннер01.jpg
Width:500px Height:400px
Пользовательский CSS, добавленный через идентификатор загрузчика
#loader{
width: 200px;
height: 200px;
}
Моя проблема в том, что когда я добавляю этот пользовательский CSS, он отлично работает с 200px шириной и 200px высотой, но это также объяснимо и для banner01.jpg.
Означает даже ширину баннера 500 пикселей и высоту 400 пикселей после загрузки изображения, которое отображается как изображение размером 200 пикселей X 200 пикселей.
Что я хочу знать
Есть ли способ добавить пользовательский CSS в data-src?
Ответы 3
Я думаю, вы должны загрузить эти два изображения в два тега изображения. И поместите его в тот же div. И поместите этот идентификатор css в div.
<div id = "loader">
<img class = "img-responsive" src = "{{asset('img/loader.gif')}}">
<img class = "img-responsive" data-src = "{{asset('uploads/banner01.jpg')}}" style = "width:500px;height:400px">
</div>
Вы попробуете ниже пользовательский css
img:not([data-src$ = "loader.gif"]) {
Width:500px
Height:400px
}
Спасибо за повтор. Но мой сайт содержит более 100 изображений, и они генерируются из БД. поэтому трудно сказать, какое изображение может загрузиться. Иногда это может быть banner01.jpg, а иногда — banner100.jpg. У вас есть какие-нибудь идеи для этого]
Вы можете попробовать :not как показано ниже img:not([class = "top-text"]) {//ваш css}
Вы можете просто использовать img[data-drc* = "banner"]{ } это будет соответствовать всем содержащимся баннерам в имени data-src
Существует лучшее решение для загрузки изображений, видео и контента после рендеринга страницы, называемое ленивой загрузкой. Существует очень простой плагин JQuery для реализации этого с очень небольшим количеством строк кода.
http://jquery.eisbehr.de/lazy/
Всего 3 шага.
Добавьте CDN или загрузите и свяжите плагин.
2. Добавьте «ленивый» в атрибут класса тега img.
НАПРИМЕР:
<img class = "lazy" data-src = "images/1.jpg" />
3. Добавьте эту функцию JQuery.
<script>
$(function() {
$('.lazy').lazy();
});
</script>
Чтобы добавить GIF для загрузки, просто измените свою функцию на это.
// plugin build-in placeholder management
$(function() {
$('.lazy').lazy({
placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7..."
});
});
Для демонстрации проверьте эту ссылку. http://jquery.eisbehr.de/lazy/example_basic-использование
Это не работает. Когда я обновил свой код, как вы упомянули, загрузите load.gif, но изображение никогда не будет видно в div. Он всегда отображает только loader.gif