I have an example that contains some elements. When i scroll so fast elements not showing and slowly loaded. Is this bug or any other problem ?
My html structure:
<div class="site-header">
This is site header
</div>
<div class="site-content">
<div class="wrapper">
<div class="item-container">
<div class="wrapper">
<div class="image-container">
</div>
<div class="title">
<span>Hello World</span>
</div>
</div>
</div>
</div>
</div><!-- End of content -->
I created a example. Here is the link. You need to check it with a mobile device.
It's not bug. When you are trying to laod image in browser, for the first time, the browser will cache the image for faster laoding in next time. So for the first time it will take some time. If you want to load it faster try to use small size with good pixel ratio image (i.e compressed) , it will load faster when compared to normal one.
If you want read more about browser caching use this link.
Use Chrome lighthouse to check the static data performance(i.e images), check here.
let me know if this works
Related
When I uploaded the html & css parts into webhost, on my browser (Google Chrome) didn't show all of the page, so I deleted cache, media, everything.
Tried to enter again on the website, still wasn't loaded all of the page.
I enter to website by Mozilla, page was there, full loaded.
Asked my friend to enter by chrome to my website, page was full loaded
I tried to enter again by chrome to website, page wasn't full loaded.
Restarted my pc, tried again, page wasn't full loaded.
But why?
That's how only I see from Chrome
That's how everybody sees even if it's from Chrome or another browser
Missing code :
<div class="banner">
<div class="container">
<div class="banner-main">
<div class="col-md-6 banner-left">
<img src="images/ba.png" alt="" class="img-responsive">
</div>
<div class="col-md-4 blc-layer3-grids-3 simpleCart_shelfItem">
<span class="bann-heart"></span>
<h2>OFERTA SPECIALA ! </h2>
<hr> <br>
<h1>Reducere MAJORĂ LA <font style="color:red">UNIVERSAL GAIN FAST !</font></h1>
<hr>
<h2 class="item_price"><strike>$200.00</strike></h5>
<h2 class="item_price"><strong>$100.00</strong></h5>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
I had some similar issue but then i realised that was due to cache.
How i found was, i re-uoloaded the file to another directory and everything worked fine. Sometimes chrome is a bad guy with cache issue.
Probably try deleting cache again or reload the page with shift pressed several times.
Hello I'm new to web design,
I used twitters bootstrap to create a website. Everytime I try to load http://www.taekwondo.uwcs.co.uk/gallery.php on mobile (ios) the browser crashes (chrome) or runs very slowly on that page.
I was wondering how could I fix this issue (how to debug it). Do I have too many images on the page? Do I need to lower the quality of the images?
I'm using lazy loading the images using this plugin (http://www.appelsiini.net/projects/lazyload). Here is the html I have there are about 8 rows of images.
<div class="row">
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/29.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/30.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/31.jpg" alt="">
</div>
</div> <!-- End of row -->
jQuery on the page
$(".img-responsive").lazyload();
Thanks in advance
The problem is that you load all the images at once because they are all in the viewport of the user if he opens the page. You should only load images which are currently visible for the user.
For that you can add a min-height (this is not the best solution for responsive websites) to your rows (e.g. min-height: 50px). A better solution is to load the first and maybe second row without lazy loading. The rest of the rows can be lazy loaded. Then the performance problem should be solved ;)
The second thing is, that I wouldn't use a jQuery plugin, because for a such tiny functionality like lazy loading you don't need such a big library which costs performance too.
I prefer a lightweight and more efficient plugin like justlazy. In the example you can see, that images are only loaded, if they are visible for the user. If you load your site, all images are loaded.
You can use justlazy as follows:
1. Define a placeholder:
<span data-src="path/to/image" data-alt="some alt text"
class="justlazy-placeholder">
</span>
Good at this solution is also that google don't index your load-gifs. If you want to seo optimize it, you can use an img with a small image as src-attribute instead of the span for the placeholder.
2. Register lazy loading via javascript
Justlazy.registerLazyLoadByClass("css-class");
jquery mobile newbie -- I inherited this project.
I have quite a few 'pages' in my jquery mobile app. On each page I have a nav panel. Each page is set up much like this:
<div data-role="page" id="help_manual" data-theme="d">
<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
<div data-role="controlgroup" data-corners="false">
Home
User main menu
</div>
</div>
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel_help_manual"
data-iconpos="notext">Menu</a> <!-- this is the button that actually brings up the above panel-->
<h3>User Manual</h3>
</div>
<div data-role="content">
BLAH BLAH CONTENT
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
Back to main menu
</div>
</div>
This all works well and good.
Then you make another page. ... Then another... Then another... Suddenly you've got a few dozen pages all with their own 'menus'. They all work, but there is a LOT of redundant code, given all the menus are identical.
Now I want to make a change to all of the menus.... and instead of modifying one 'navigation panel' I have to make the change a few dozen error-prone times.
I have tried simply taking the 'panel' code and moving it outside the 'page' div... but that results in, effectively, a 'new' 'page' when the button is clicked. Other attempts at moving the various parts of this code around are similarly broken.
An include could remove the 'list' from the 'core' of the control group... unfortunately, that still leaves a lot of redundant code and I've got one fun tweak: This page needs to be able to work offline. The purpose of this app is to be able to go offline, collect data 'in the field', and come back and upload it. So a SSI isn't an good option.
Help?
Here is a JsFiddle with multiple pages and the panel written only once.
You should write your panel once outside the page. (If you have one file per page, just write the panel outside the index page as a sibling of the page) :
<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
...
</div>
<div data-role="page" id="help_manual" data-theme="d">
...
</div>
Doing so and as it becomes an external panel. You should then initialise it manually.
$('#navpanel_help_manual').panel();
The panels below are all located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page.
I'm using context to print blocks into a region. However, I'd like to have the region print wrapper DIVs around the blocks of the given area. I know this is possible with region.tpl.php in Drupal 7. I can't seem to figure out the best way in Drupal 6.
<div class="{region classes i.e. sidebarleft}">
<div class="{block 1}"></div>
<div class="{block 2}"></div>
<div class="{block 3}"></div>
<div class="{block 4}"></div>
</div>
However, currently it prints like this:
<a id="context-block-region-right" class="context-block-region">Right Sidebar</a>
// the previous anchor tags is hidden
<div id="block-block-82" class="clear-block block block-block">
<h2>Community Navigation Block</h2>
<div class="content">
<div id="community-landing-navigation-menu">
<div class="joinCommunityBox">
<div class="community-landing-pagePanelWrapperSideBar">
<div class="community-landing-pagePanelWrapperSideBar">
<a id="context-block-block-82" class="context-block editable edit-community_contexts"></a>
</div>
</div>
I wish it would print a region wrapper tag around ALL of that...
Also, I want to keep my page.tpl.php clean of extra wrapper tags. It would be better if we could preprocess regions to print a wrapper tag.
I figured it out... The answer is actually borrowed from zen. If you click the link below, several 'preprocess functions' are rendering a new region template. Then, blocks are collected into that region, and printed.
http://www.drupal.org/node/223440#comment-5304866
It works great, and is going to go production soon.
I am using the DNN MobiNuke Module (v02.00.03) from DataQuadrant to create a mobile version of a website I have created. Everything is going well EXCEPT a weird issue I am running into with the Mobile Skins. I have a simple Mobile Skin that looks like this:
<div id="mobile_frame">
<div id="mobile_header">
...
...
</div>
<div id="main_wrap">
<div id="mobile_main" class="sub">
<div id="ContentPane" runat="server"></div>
</div>
</div>
<div id="mobile_footer">
...
...
</div>
</div>
The issue that is arising is that ANY content in the ContentPane that has an empty div tag will change itself when rendered in a mobile browser:
<div class="xxxx"></div>
Will change itself to
<div class="xxxx" />
The biggest problem that this is causing is that the browser is interpreting the tag as an opening div tag with no closing tag. Therefore it is placing an ending div tag essentially wherever it wants. It's causing ALL of the markup after this area to get very messed up.
Here is an example of the code as it should be, and how it is rendering on the page:
Should be:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
</div>
<div id="mobile_footer">
...
</div>
</div>
But it renders as:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
<div id="mobile_footer">
...
</div>
</div>
</div>
I can fix this in the markup that I have control of by putting inside of the tags, but I do not have the time/energy to go through EVERY module that might be showing up in the ContentPane to check for empty tags. In addition, there are places where I want an empty tag to fill it with content later with javascript.
Lastly, I did a TON of research to look this up and I cannot find a thing. The closest that I found is that this happens in XSLT when transforming some XML, but as far as I know MobiNuke is not doing that.
Any help is greatly appreciated. Thanks!
I have figured out the issue after having a discussion with the vendor. There is a setting in the module settings called "Enable content adaptation". Apparently the setting will try to make the HTML to be XHTML compliant, but it was definitely not working for me. Hope this helps anyone else seeing this.